Remove dependency on matrix-react-sdk

src/video-grid/VideoGrid.module.css

@@ -0,0 +1,7 @@
+.videoGrid {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  touch-action: none;
+}
+

src/video-grid/VideoGrid.stories.jsx

@@ -1,9 +1,6 @@
 import React, { useState } from "react";
-import VideoGrid, {
-  useVideoGridLayout,
-} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
-import VideoTile from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTile";
-import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
+import { VideoGrid, useVideoGridLayout } from "./VideoGrid";
+import { VideoTile } from "./VideoTile";
 import { useMemo } from "react";
 import { Button } from "../button";
 

src/video-grid/VideoTile.jsx

@@ -0,0 +1,54 @@
+import React 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>}
+          </div>
+        )
+      )}
+      <video ref={mediaRef} playsInline disablePictureInPicture />
+    </animated.div>
+  );
+}

src/video-grid/VideoTile.module.css

@@ -0,0 +1,113 @@
+.videoTile {
+  position: absolute;
+  will-change: transform, width, height, opacity, box-shadow;
+  border-radius: 20px;
+  overflow: hidden;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.videoTile * {
+  touch-action: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.videoTile video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-color: #444;
+}
+
+.videoTile.isLocal:not(.screenshare) video {
+  transform: scaleX(-1);
+}
+
+.videoTile.speaking::after {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  content: "";
+  border-radius: 20px;
+  box-shadow: inset 0 0 0 4px #0dbd8b !important;
+}
+
+.videoTile.screenshare > video {
+  object-fit: contain;
+}
+
+.memberName {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  height: 24px;
+  padding: 0 8px;
+  color: white;
+  background-color: rgba(23, 25, 28, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  user-select: none;
+  max-width: calc(100% - 48px);
+  overflow: hidden;
+  z-index: 1;
+}
+
+.memberName > * {
+  margin-right: 6px;
+}
+
+.memberName > :last-child {
+  margin-right: 0px;
+}
+
+.memberName span {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.videoMutedAvatar {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.videoMutedOverlay {
+  width: 100%;
+  height: 100%;
+  background-color: #21262C;
+}
+
+.presenterLabel {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #17191C;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 15px;
+}
+
+.screensharePIP {
+  bottom: 8px;
+  right: 8px;
+  width: 25%;
+  max-width: 360px;
+  border-radius: 20px;
+}

src/video-grid/VideoTileContainer.jsx

@@ -0,0 +1,49 @@
+import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
+import React from "react";
+import { useCallFeed } from "./useCallFeed";
+import { useMediaStream } from "./useMediaStream";
+import { useRoomMemberName } from "./useRoomMemberName";
+import { VideoTile } from "./VideoTile";
+
+export function VideoTileContainer({
+  item,
+  width,
+  height,
+  getAvatar,
+  showName,
+  audioOutputDevice,
+  disableSpeakingIndicator,
+  ...rest
+}) {
+  const {
+    isLocal,
+    audioMuted,
+    videoMuted,
+    noVideo,
+    speaking,
+    stream,
+    purpose,
+    member,
+  } = useCallFeed(item.callFeed);
+  const { rawDisplayName } = useRoomMemberName(member);
+  const mediaRef = useMediaStream(stream, audioOutputDevice, isLocal);
+
+  // Firefox doesn't respect the disablePictureInPicture attribute
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
+
+  return (
+    <VideoTile
+      isLocal={isLocal}
+      speaking={speaking && !disableSpeakingIndicator}
+      audioMuted={audioMuted}
+      noVideo={noVideo}
+      videoMuted={videoMuted}
+      screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
+      name={rawDisplayName}
+      showName={showName}
+      mediaRef={mediaRef}
+      avatar={getAvatar && getAvatar(member, width, height)}
+      {...rest}
+    />
+  );
+}

src/video-grid/useCallFeed.js

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
+
+function getCallFeedState(callFeed) {
+  return {
+    member: callFeed ? callFeed.getMember() : null,
+    isLocal: callFeed ? callFeed.isLocal() : false,
+    speaking: callFeed ? callFeed.isSpeaking() : false,
+    noVideo: callFeed
+      ? !callFeed.stream || callFeed.stream.getVideoTracks().length === 0
+      : true,
+    videoMuted: callFeed ? callFeed.isVideoMuted() : true,
+    audioMuted: callFeed ? callFeed.isAudioMuted() : true,
+    stream: callFeed ? callFeed.stream : undefined,
+    purpose: callFeed ? callFeed.purpose : undefined,
+  };
+}
+
+export function useCallFeed(callFeed) {
+  const [state, setState] = useState(() => getCallFeedState(callFeed));
+
+  useEffect(() => {
+    function onSpeaking(speaking) {
+      setState((prevState) => ({ ...prevState, speaking }));
+    }
+
+    function onMuteStateChanged(audioMuted, videoMuted) {
+      setState((prevState) => ({ ...prevState, audioMuted, videoMuted }));
+    }
+
+    function onUpdateCallFeed() {
+      setState(getCallFeedState(callFeed));
+    }
+
+    if (callFeed) {
+      callFeed.on(CallFeedEvent.Speaking, onSpeaking);
+      callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
+      callFeed.on(CallFeedEvent.NewStream, onUpdateCallFeed);
+    }
+
+    onUpdateCallFeed();
+
+    return () => {
+      if (callFeed) {
+        callFeed.removeListener(CallFeedEvent.Speaking, onSpeaking);
+        callFeed.removeListener(
+          CallFeedEvent.MuteStateChanged,
+          onMuteStateChanged
+        );
+        callFeed.removeListener(CallFeedEvent.NewStream, onUpdateCallFeed);
+      }
+    };
+  }, [callFeed]);
+
+  return state;
+}

src/video-grid/useMediaStream.js

@@ -0,0 +1,48 @@
+import { useRef, useEffect } from "react";
+
+export function useMediaStream(stream, audioOutputDevice, mute = false) {
+  const mediaRef = useRef();
+
+  useEffect(() => {
+    console.log(
+      `useMediaStream update stream mediaRef.current ${!!mediaRef.current} stream ${
+        stream && stream.id
+      }`
+    );
+
+    if (mediaRef.current) {
+      if (stream) {
+        mediaRef.current.muted = mute;
+        mediaRef.current.srcObject = stream;
+        mediaRef.current.play();
+      } else {
+        mediaRef.current.srcObject = null;
+      }
+    }
+  }, [stream, mute]);
+
+  useEffect(() => {
+    if (
+      mediaRef.current &&
+      audioOutputDevice &&
+      mediaRef.current !== undefined
+    ) {
+      console.log(`useMediaStream setSinkId ${audioOutputDevice}`);
+      mediaRef.current.setSinkId(audioOutputDevice);
+    }
+  }, [audioOutputDevice]);
+
+  useEffect(() => {
+    const mediaEl = mediaRef.current;
+
+    return () => {
+      if (mediaEl) {
+        // Ensure we set srcObject to null before unmounting to prevent memory leak
+        // https://webrtchacks.com/srcobject-intervention/
+        mediaEl.srcObject = null;
+      }
+    };
+  }, []);
+
+  return mediaRef;
+}

src/video-grid/useRoomMemberName.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export function useRoomMemberName(member) {
+  const [state, setState] = useState({
+    name: member.name,
+    rawDisplayName: member.rawDisplayName,
+  });
+
+  useEffect(() => {
+    function updateName() {
+      setState({ name: member.name, rawDisplayName: member.rawDisplayName });
+    }
+
+    updateName();
+
+    member.on("RoomMember.name", updateName);
+
+    return () => {
+      member.removeListener("RoomMember.name", updateName);
+    };
+  }, [member]);
+
+  return state;
+}