Show your own name on your tile

public/locales/en-GB/app.json

@@ -161,7 +161,6 @@
     "exit_full_screen": "Exit full screen",
     "full_screen": "Full screen",
     "mute_for_me": "Mute for me",
-    "sfu_participant_local": "You",
     "volume": "Volume"
   }
 }

src/state/MediaViewModel.ts

@@ -45,28 +45,14 @@ import {
   startWith,
   switchMap,
 } from "rxjs";
-import { useTranslation } from "react-i18next";
 import { useEffect } from "react";
 
 import { ViewModel } from "./ViewModel";
 import { useReactiveState } from "../useReactiveState";
 import { alwaysShowSelf } from "../settings/settings";
 
-export interface NameData {
-  /**
-   * The display name of the participant.
-   */
-  displayName: string;
-  /**
-   * The text to be shown on the participant's name tag.
-   */
-  nameTag: string;
-}
-
 // TODO: Move this naming logic into the view model
-export function useNameData(vm: MediaViewModel): NameData {
-  const { t } = useTranslation();
-
+export function useDisplayName(vm: MediaViewModel): string {
   const [displayName, setDisplayName] = useReactiveState(
     () => vm.member?.rawDisplayName ?? "[👻]",
     [vm.member],
@@ -83,11 +69,8 @@ export function useNameData(vm: MediaViewModel): NameData {
       };
     }
   }, [vm.member, setDisplayName]);
-  const nameTag = vm.local
-    ? t("video_tile.sfu_participant_local")
-    : displayName;
 
-  return { displayName, nameTag };
+  return displayName;
 }
 
 function observeTrackReference(

src/tile/GridTile.tsx

@@ -46,7 +46,7 @@ import { useObservableEagerState } from "observable-hooks";
 import styles from "./GridTile.module.css";
 import {
   UserMediaViewModel,
-  useNameData,
+  useDisplayName,
   LocalUserMediaViewModel,
   RemoteUserMediaViewModel,
 } from "../state/MediaViewModel";
@@ -60,7 +60,6 @@ interface TileProps {
   targetWidth: number;
   targetHeight: number;
   displayName: string;
-  nameTag: string;
   showSpeakingIndicators: boolean;
 }
 
@@ -79,7 +78,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       menuStart,
       menuEnd,
       className,
-      nameTag,
+      displayName,
       ...props
     },
     ref,
@@ -134,12 +133,12 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
             className={styles.muteIcon}
           />
         }
-        nameTag={nameTag}
+        displayName={displayName}
         primaryButton={
           <Menu
             open={menuOpen}
             onOpenChange={setMenuOpen}
-            title={nameTag}
+            title={displayName}
             trigger={
               <button aria-label={t("common.options")}>
                 <OverflowHorizontalIcon aria-hidden width={20} height={20} />
@@ -156,7 +155,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     );
 
     return (
-      <ContextMenu title={nameTag} trigger={tile} hasAccessibleAlternative>
+      <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
         {menu}
       </ContextMenu>
     );
@@ -282,20 +281,27 @@ interface GridTileProps {
 
 export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
   ({ vm, onOpenProfile, ...props }, ref) => {
-    const nameData = useNameData(vm);
+    const displayName = useDisplayName(vm);
 
     if (vm instanceof LocalUserMediaViewModel) {
       return (
         <LocalUserMediaTile
           ref={ref}
           vm={vm}
           onOpenProfile={onOpenProfile}
+          displayName={displayName}
           {...props}
-          {...nameData}
         />
       );
     } else {
-      return <RemoteUserMediaTile ref={ref} vm={vm} {...props} {...nameData} />;
+      return (
+        <RemoteUserMediaTile
+          ref={ref}
+          vm={vm}
+          displayName={displayName}
+          {...props}
+        />
+      );
     }
   },
 );

src/tile/MediaView.tsx

@@ -39,7 +39,6 @@ interface Props extends ComponentProps<typeof animated.div> {
   videoEnabled: boolean;
   unencryptedWarning: boolean;
   nameTagLeadingIcon?: ReactNode;
-  nameTag: string;
   displayName: string;
   primaryButton?: ReactNode;
 }
@@ -58,7 +57,6 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       videoEnabled,
       unencryptedWarning,
       nameTagLeadingIcon,
-      nameTag,
       displayName,
       primaryButton,
       ...props
@@ -100,7 +98,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>
-              {nameTag}
+              {displayName}
             </Text>
             {unencryptedWarning && (
               <Tooltip

src/tile/SpotlightTile.tsx

@@ -44,7 +44,7 @@ import {
   MediaViewModel,
   ScreenShareViewModel,
   UserMediaViewModel,
-  useNameData,
+  useDisplayName,
 } from "../state/MediaViewModel";
 import { useInitial } from "../useInitial";
 import { useMergedRefs } from "../useMergedRefs";
@@ -60,7 +60,6 @@ interface SpotlightItemBaseProps {
   video: TrackReferenceOrPlaceholder;
   member: RoomMember | undefined;
   unencryptedWarning: boolean;
-  nameTag: string;
   displayName: string;
 }
 
@@ -125,7 +124,7 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
   ({ vm, targetWidth, targetHeight, intersectionObserver, snap }, theirRef) => {
     const ourRef = useRef<HTMLDivElement | null>(null);
     const ref = useMergedRefs(ourRef, theirRef);
-    const { displayName, nameTag } = useNameData(vm);
+    const displayName = useDisplayName(vm);
     const video = useObservableEagerState(vm.video);
     const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning);
 
@@ -153,7 +152,6 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
       video,
       member: vm.member,
       unencryptedWarning,
-      nameTag,
       displayName,
     };