Add spatial audio capabilities

src/video-grid/VideoTile.jsx

@@ -14,57 +14,63 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { forwardRef } from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import styles from "./VideoTile.module.css";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
 import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
 
-export function VideoTile({
-  className,
-  isLocal,
-  speaking,
-  audioMuted,
-  noVideo,
-  videoMuted,
-  screenshare,
-  avatar,
-  name,
-  showName,
-  mediaRef,
-  ...rest
-}) {
-  return (
-    <animated.div
-      className={classNames(styles.videoTile, className, {
-        [styles.isLocal]: isLocal,
-        [styles.speaking]: speaking,
-        [styles.muted]: audioMuted,
-        [styles.screenshare]: screenshare,
-      })}
-      {...rest}
-    >
-      {(videoMuted || noVideo) && (
-        <>
-          <div className={styles.videoMutedOverlay} />
-          {avatar}
-        </>
-      )}
-      {screenshare ? (
-        <div className={styles.presenterLabel}>
-          <span>{`${name} is presenting`}</span>
-        </div>
-      ) : (
-        (showName || audioMuted || (videoMuted && !noVideo)) && (
-          <div className={styles.memberName}>
-            {audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
-            {videoMuted && !noVideo && <VideoMutedIcon />}
-            {showName && <span title={name}>{name}</span>}
+export const VideoTile = forwardRef(
+  (
+    {
+      className,
+      isLocal,
+      speaking,
+      audioMuted,
+      noVideo,
+      videoMuted,
+      screenshare,
+      avatar,
+      name,
+      showName,
+      mediaRef,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <animated.div
+        className={classNames(styles.videoTile, className, {
+          [styles.isLocal]: isLocal,
+          [styles.speaking]: speaking,
+          [styles.muted]: audioMuted,
+          [styles.screenshare]: screenshare,
+        })}
+        ref={ref}
+        {...rest}
+      >
+        {(videoMuted || noVideo) && (
+          <>
+            <div className={styles.videoMutedOverlay} />
+            {avatar}
+          </>
+        )}
+        {screenshare ? (
+          <div className={styles.presenterLabel}>
+            <span>{`${name} is presenting`}</span>
           </div>
-        )
-      )}
-      <video ref={mediaRef} playsInline disablePictureInPicture />
-    </animated.div>
-  );
-}
+        ) : (
+          (showName || audioMuted || (videoMuted && !noVideo)) && (
+            <div className={styles.memberName}>
+              {audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
+              {videoMuted && !noVideo && <VideoMutedIcon />}
+              {showName && <span title={name}>{name}</span>}
+            </div>
+          )
+        )}
+        <video ref={mediaRef} playsInline disablePictureInPicture />
+      </animated.div>
+    );
+  }
+);