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

Add always show toggle to the UI

Browse Source
This commit is contained in:
Robin
2024-06-20 10:37:42 -04:00
parent 8a414012a0
commit 5647619b36
2 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/locales/en-GB/app.json
View File

@@ -155,6 +155,7 @@
"unmute_microphone_button_label": "Unmute microphone", "unmute_microphone_button_label": "Unmute microphone",
"version": "Version: {{version}}", "version": "Version: {{version}}",
"video_tile": { "video_tile": {
"always_show": "Always show",
"change_fit_contain": "Fit to frame", "change_fit_contain": "Fit to frame",
"exit_full_screen": "Exit full screen", "exit_full_screen": "Exit full screen",
"full_screen": "Full screen", "full_screen": "Full screen",

21
src/tile/GridTile.tsx
View File

@@ -30,6 +30,7 @@ import MicOffIcon from "@vector-im/compound-design-tokens/icons/mic-off.svg?reac
import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg?react"; import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg?react";
import VolumeOnIcon from "@vector-im/compound-design-tokens/icons/volume-on.svg?react"; import VolumeOnIcon from "@vector-im/compound-design-tokens/icons/volume-on.svg?react";
import VolumeOffIcon from "@vector-im/compound-design-tokens/icons/volume-off.svg?react"; import VolumeOffIcon from "@vector-im/compound-design-tokens/icons/volume-off.svg?react";
import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg?react";
import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react"; import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react"; import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react";
import CollapseIcon from "@vector-im/compound-design-tokens/icons/collapse.svg?react"; import CollapseIcon from "@vector-im/compound-design-tokens/icons/collapse.svg?react";
@@ -52,6 +53,7 @@ import {
} from "../state/MediaViewModel"; } from "../state/MediaViewModel";
import { Slider } from "../Slider"; import { Slider } from "../Slider";
import { MediaView } from "./MediaView"; import { MediaView } from "./MediaView";
import { useLatest } from "../useLatest";
interface TileProps { interface TileProps {
className?: string; className?: string;
@@ -203,12 +205,31 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
({ vm, onOpenProfile, className, ...props }, ref) => { ({ vm, onOpenProfile, className, ...props }, ref) => {
const { t } = useTranslation(); const { t } = useTranslation();
const mirror = useObservableEagerState(vm.mirror); const mirror = useObservableEagerState(vm.mirror);
const alwaysShow = useObservableEagerState(vm.alwaysShow);
const latestAlwaysShow = useLatest(alwaysShow);
const onSelectAlwaysShow = useCallback(
(e: Event) => e.preventDefault(),
[],
);
const onChangeAlwaysShow = useCallback(
() => vm.setAlwaysShow(!latestAlwaysShow.current),
[vm, latestAlwaysShow],
);
return ( return (
<UserMediaTile <UserMediaTile
ref={ref} ref={ref}
vm={vm} vm={vm}
menuStart={ menuStart={
<ToggleMenuItem
Icon={VisibilityOnIcon}
label={t("video_tile.always_show")}
checked={alwaysShow}
onChange={onChangeAlwaysShow}
onSelect={onSelectAlwaysShow}
/>
}
menuEnd={
<MenuItem <MenuItem
Icon={UserProfileIcon} Icon={UserProfileIcon}
label={t("common.profile")} label={t("common.profile")}