From 5647619b366902d8dbc27a7ba56b6281d73f2c26 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 20 Jun 2024 10:37:42 -0400
Subject: [PATCH] Add always show toggle to the UI

---
 public/locales/en-GB/app.json |  1 +
 src/tile/GridTile.tsx         | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index 4279bbb5..922a4c79 100644
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -155,6 +155,7 @@
   "unmute_microphone_button_label": "Unmute microphone",
   "version": "Version: {{version}}",
   "video_tile": {
+    "always_show": "Always show",
     "change_fit_contain": "Fit to frame",
     "exit_full_screen": "Exit full screen",
     "full_screen": "Full screen",
diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx
index b0753aca..ba615953 100644
--- a/src/tile/GridTile.tsx
+++ b/src/tile/GridTile.tsx
@@ -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 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 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 ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react";
 import CollapseIcon from "@vector-im/compound-design-tokens/icons/collapse.svg?react";
@@ -52,6 +53,7 @@ import {
 } from "../state/MediaViewModel";
 import { Slider } from "../Slider";
 import { MediaView } from "./MediaView";
+import { useLatest } from "../useLatest";
 
 interface TileProps {
   className?: string;
@@ -203,12 +205,31 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
   ({ vm, onOpenProfile, className, ...props }, ref) => {
     const { t } = useTranslation();
     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 (
       <UserMediaTile
         ref={ref}
         vm={vm}
         menuStart={
+          <ToggleMenuItem
+            Icon={VisibilityOnIcon}
+            label={t("video_tile.always_show")}
+            checked={alwaysShow}
+            onChange={onChangeAlwaysShow}
+            onSelect={onSelectAlwaysShow}
+          />
+        }
+        menuEnd={
           <MenuItem
             Icon={UserProfileIcon}
             label={t("common.profile")}