Merge branch 'livekit' into toger5/tiles_based_on_rtc_member

src/tile/MediaView.tsx

@@ -76,7 +76,6 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       <animated.div
         className={classNames(styles.media, className, {
           [styles.mirror]: mirror,
-          [styles.videoMuted]: !videoEnabled,
         })}
         style={style}
         ref={ref}
@@ -91,6 +90,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
             size={avatarSize}
             src={member?.getMxcAvatarUrl()}
             className={styles.avatar}
+            style={{ display: videoEnabled ? "none" : "initial" }}
           />
           {video?.publication !== undefined && (
             <VideoTrack
@@ -98,6 +98,8 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
               // There's no reason for this to be focusable
               tabIndex={-1}
               disablePictureInPicture
+              style={{ display: videoEnabled ? "block" : "none" }}
+              data-testid="video"
             />
           )}
         </div>
@@ -133,7 +135,13 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           )*/}
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
-            <Text as="span" size="sm" weight="medium" className={styles.name}>
+            <Text
+              as="span"
+              size="sm"
+              weight="medium"
+              className={styles.name}
+              data-testid="name_tag"
+            >
               {displayName}
             </Text>
             {unencryptedWarning && (
@@ -146,6 +154,8 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
                   width={20}
                   height={20}
                   className={styles.errorIcon}
+                  role="img"
+                  aria-label={t("common.unencrypted")}
                 />
               </Tooltip>
             )}