rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adapt to breaking changes in Compound

Browse Source
This commit is contained in:
Robin
2024-08-02 15:27:49 -04:00
parent 86e3c346a4
commit b503056673
6 changed files with 76 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/button/Button.tsx
View File

@@ -151,7 +151,7 @@ export const MicButton: FC<{
return (
<Tooltip label={label}>
<Button variant="toolbar" {...rest} on={muted}>
<Icon aria-label={label} width={24} height={24} />
<Icon aria-hidden width={24} height={24} />
</Button>
</Tooltip>
);
@@ -171,7 +171,7 @@ export const VideoButton: FC<{
return (
<Tooltip label={label}>
<Button variant="toolbar" {...rest} on={muted}>
<Icon aria-label={label} width={24} height={24} />
<Icon aria-hidden width={24} height={24} />
</Button>
</Tooltip>
);
@@ -191,7 +191,7 @@ export const ScreenshareButton: FC<{
return (
<Tooltip label={label}>
<Button variant="toolbar" {...rest} on={enabled}>
<ShareScreenSolidIcon aria-label={label} width={24} height={24} />
<ShareScreenSolidIcon aria-hidden width={24} height={24} />
</Button>
</Tooltip>
);
@@ -211,11 +211,7 @@ export const HangupButton: FC<{
className={classNames(styles.hangupButton, className)}
{...rest}
>
<EndCallIcon
aria-label={t("hangup_button_label")}
width={24}
height={24}
/>
<EndCallIcon aria-hidden width={24} height={24} />
</Button>
</Tooltip>
);
@@ -231,11 +227,7 @@ export const SettingsButton: FC<{
return (
<Tooltip label={t("common.settings")}>
<Button variant="toolbar" {...rest}>
<SettingsSolidIcon
aria-label={t("common.settings")}
width={24}
height={24}
/>
<SettingsSolidIcon aria-hidden width={24} height={24} />
</Button>
</Tooltip>
);

6
src/room/EncryptionLock.tsx
View File

@@ -1,5 +1,5 @@
/*
Copyright 2023 New Vector Ltd
Copyright 2023-2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -34,13 +34,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
return (
<Tooltip label={label} side="right" isTriggerInteractive={false}>
<Tooltip label={label} placement="right" isTriggerInteractive={false}>
<Icon
width={16}
height={16}
className={styles.lock}
data-encrypted={encrypted}
aria-label={label}
aria-hidden
/>
</Tooltip>
);

60
src/room/LayoutToggle.module.css
View File

@@ -1,5 +1,5 @@
/*
Copyright 2023 New Vector Ltd
Copyright 2023-2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -21,22 +21,15 @@ limitations under the License.
background: var(--cpd-color-bg-canvas-default);
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
display: flex;
position: relative;
}
.toggle input {
appearance: none;
/*
* Safari puts a margin on these, which is not removed via appearance: none
* mobile safari also has them take up space in the DOM, so set width 0
*/
/* Safari puts a margin on these, which is not removed via appearance: none */
margin: 0;
width: 0;
outline: none !important;
}
.toggle label {
display: block;
padding: calc(2.5 * var(--cpd-space-1x));
block-size: var(--cpd-space-11x);
inline-size: var(--cpd-space-11x);
cursor: pointer;
border-radius: var(--cpd-radius-pill-effect);
color: var(--cpd-color-icon-primary);
@@ -44,41 +37,52 @@ limitations under the License.
box-shadow: var(--small-drop-shadow);
}
.toggle svg {
display: block;
position: absolute;
padding: calc(2.5 * var(--cpd-space-1x));
pointer-events: none;
color: var(--cpd-color-icon-primary);
}
.toggle svg:nth-child(2) {
inset-inline-start: 2px;
}
.toggle svg:nth-child(4) {
inset-inline-end: 2px;
}
@media (hover: hover) {
.toggle label:hover {
.toggle input:hover {
background: var(--cpd-color-bg-action-secondary-hovered);
box-shadow: none;
}
}
.toggle label:active {
.toggle input:active {
background: var(--cpd-color-bg-action-secondary-hovered);
box-shadow: none;
}
.toggle input:checked + label {
color: var(--cpd-color-icon-on-solid-primary);
.toggle input:checked {
background: var(--cpd-color-bg-action-primary-rest);
}
.toggle input:checked + svg {
color: var(--cpd-color-icon-on-solid-primary);
}
@media (hover: hover) {
.toggle input:checked + label:hover {
.toggle input:checked:hover {
background: var(--cpd-color-bg-action-primary-hovered);
}
}
.toggle input:checked + label:active {
.toggle input:checked:active {
background: var(--cpd-color-bg-action-primary-hovered);
}
.toggle label > svg {
display: block;
}
.toggle label:last-child {
margin-inline-start: 5px;
}
.toggle input:focus-visible + label {
outline: auto;
.toggle input:first-child {
margin-inline-end: 5px;
}

53
src/room/LayoutToggle.tsx
View File

@@ -1,5 +1,5 @@
/*
Copyright 2023 New Vector Ltd
Copyright 2023-2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { ChangeEvent, FC, useCallback, useId } from "react";
import { ChangeEvent, FC, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Tooltip } from "@vector-im/compound-web";
import {
@@ -41,45 +41,28 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
[setLayout],
);
const spotlightId = useId();
const gridId = useId();
return (
<div className={classNames(styles.toggle, className)}>
<input
id={spotlightId}
type="radio"
name="layout"
value="spotlight"
checked={layout === "spotlight"}
onChange={onChange}
/>
<Tooltip label={t("layout_spotlight_label")}>
<label htmlFor={spotlightId}>
<SpotlightIcon
aria-label={t("layout_spotlight_label")}
width={24}
height={24}
/>
</label>
<input
type="radio"
name="layout"
value="spotlight"
checked={layout === "spotlight"}
onChange={onChange}
/>
</Tooltip>
<input
id={gridId}
type="radio"
name="layout"
value="grid"
checked={layout === "grid"}
onChange={onChange}
/>
<SpotlightIcon aria-hidden width={24} height={24} />
<Tooltip label={t("layout_grid_label")}>
<label htmlFor={gridId}>
<GridIcon
aria-label={t("layout_grid_label")}
width={24}
height={24}
/>
</label>
<input
type="radio"
name="layout"
value="grid"
checked={layout === "grid"}
onChange={onChange}
/>
</Tooltip>
<GridIcon aria-hidden width={24} height={24} />
</div>
);
};

29
src/tile/GridTile.tsx
View File

@@ -90,10 +90,12 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
const videoEnabled = useObservableEagerState(vm.videoEnabled);
const speaking = useObservableEagerState(vm.speaking);
const cropVideo = useObservableEagerState(vm.cropVideo);
const onChangeFitContain = useCallback(() => vm.toggleFitContain(), [vm]);
const onSelectFitContain = useCallback(
(e: Event) => e.preventDefault(),
[],
(e: Event) => {
e.preventDefault();
vm.toggleFitContain();
},
[vm],
);
const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
@@ -106,7 +108,6 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
Icon={ExpandIcon}
label={t("video_tile.change_fit_contain")}
checked={cropVideo}
onChange={onChangeFitContain}
onSelect={onSelectFitContain}
/>
{menuEnd}
@@ -176,11 +177,10 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
const alwaysShow = useObservableEagerState(vm.alwaysShow);
const latestAlwaysShow = useLatest(alwaysShow);
const onSelectAlwaysShow = useCallback(
(e: Event) => e.preventDefault(),
[],
);
const onChangeAlwaysShow = useCallback(
() => vm.setAlwaysShow(!latestAlwaysShow.current),
(e: Event) => {
e.preventDefault();
vm.setAlwaysShow(!latestAlwaysShow.current);
},
[vm, latestAlwaysShow],
);
@@ -194,7 +194,6 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
Icon={VisibilityOnIcon}
label={t("video_tile.always_show")}
checked={alwaysShow}
onChange={onChangeAlwaysShow}
onSelect={onSelectAlwaysShow}
/>
}
@@ -224,8 +223,13 @@ const RemoteUserMediaTile = forwardRef<
const { t } = useTranslation();
const locallyMuted = useObservableEagerState(vm.locallyMuted);
const localVolume = useObservableEagerState(vm.localVolume);
const onChangeMute = useCallback(() => vm.toggleLocallyMuted(), [vm]);
const onSelectMute = useCallback((e: Event) => e.preventDefault(), []);
const onSelectMute = useCallback(
(e: Event) => {
e.preventDefault();
vm.toggleLocallyMuted();
},
[vm],
);
const onChangeLocalVolume = useCallback(
(v: number) => vm.setLocalVolume(v),
[vm],
@@ -244,7 +248,6 @@ const RemoteUserMediaTile = forwardRef<
Icon={MicOffIcon}
label={t("video_tile.mute_for_me")}
checked={locallyMuted}
onChange={onChangeMute}
onSelect={onSelectMute}
/>
{/* TODO: Figure out how to make this slider keyboard accessible */}

4
src/tile/MediaView.tsx
View File

@@ -103,14 +103,14 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
{unencryptedWarning && (
<Tooltip
label={t("common.unencrypted")}
side="bottom"
placement="bottom"
isTriggerInteractive={false}
>
<ErrorIcon
width={20}
height={20}
aria-label={t("common.unencrypted")}
className={styles.errorIcon}
aria-hidden
/>
</Tooltip>
)}