Merge branch 'livekit-experiment' into livekit-load-test

This commit is contained in:
Daniel Abramov 2023-06-14 17:12:03 +02:00
commit 520f241efa
13 changed files with 352 additions and 427 deletions

View file

@ -28,7 +28,7 @@ import { Room, Track } from "livekit-client";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
import React, { useCallback, useEffect, useMemo, useRef } from "react";
import React, { Ref, useCallback, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import useMeasure from "react-use-measure";
import { OverlayTriggerState } from "@react-stately/overlays";
@ -55,29 +55,29 @@ import {
useVideoGridLayout,
TileDescriptor,
} from "../video-grid/VideoGrid";
import { useNewGrid, useShowInspector } from "../settings/useSetting";
import { useShowInspector } from "../settings/useSetting";
import { useModalTriggerState } from "../Modal";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
import { useUrlParams } from "../UrlParams";
import { MediaDevicesState } from "../settings/mediaDevices";
import { useRageshakeRequestModal } from "../settings/submit-rageshake";
import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
import { ItemData, VideoTileContainer } from "../video-grid/VideoTileContainer";
import { ElementWidgetActions, widget } from "../widget";
import { GridLayoutMenu } from "./GridLayoutMenu";
import { GroupCallInspector } from "./GroupCallInspector";
import styles from "./InCallView.module.css";
import { RageshakeRequestModal } from "./RageshakeRequestModal";
import { MatrixInfo } from "./VideoPreview";
import { useJoinRule } from "./useJoinRule";
import { ParticipantInfo } from "./useGroupCall";
import { TileContent } from "../video-grid/VideoTile";
import { ItemData, TileContent } from "../video-grid/VideoTile";
import { Config } from "../config/Config";
import { NewVideoGrid } from "../video-grid/NewVideoGrid";
import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
import { SettingsModal } from "../settings/SettingsModal";
import { InviteModal } from "./InviteModal";
import { useRageshakeRequestModal } from "../settings/submit-rageshake";
import { RageshakeRequestModal } from "./RageshakeRequestModal";
import { VideoTile } from "../video-grid/VideoTile";
const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
// There is currently a bug in Safari our our code with cloning and sending MediaStreams
@ -258,8 +258,9 @@ export function InCallView({
[noControls, items]
);
const [newGrid] = useNewGrid();
const Grid = newGrid ? NewVideoGrid : VideoGrid;
const Grid =
items.length > 12 && layout === "freedom" ? NewVideoGrid : VideoGrid;
const prefersReducedMotion = usePrefersReducedMotion();
const renderContent = (): JSX.Element => {
@ -272,12 +273,11 @@ export function InCallView({
}
if (maximisedParticipant) {
return (
<VideoTileContainer
<VideoTile
targetHeight={bounds.height}
targetWidth={bounds.width}
id={maximisedParticipant.id}
key={maximisedParticipant.id}
item={maximisedParticipant.data}
data={maximisedParticipant.data}
/>
);
}
@ -288,7 +288,9 @@ export function InCallView({
layout={layout}
disableAnimations={prefersReducedMotion || isSafari}
>
{(child) => <VideoTileContainer item={child.data} {...child} />}
{(props) => (
<VideoTile {...props} ref={props.ref as Ref<HTMLDivElement>} />
)}
</Grid>
);
};
@ -462,7 +464,6 @@ function useParticipantTiles(
focused: false,
local: sfuParticipant.isLocal,
data: {
id,
member,
sfuParticipant,
content: TileContent.UserMedia,