Quick way to replace matrix JS SDK with LiveKit
This commit is contained in:
Daniel Abramov
parent
fb9dd7ff71
commit
ee1819a0b6
13 changed files with 177 additions and 800 deletions
|
|
@ -1,47 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { TileDescriptor } from "./TileDescriptor";
|
||||
import { useCallFeed } from "./useCallFeed";
|
||||
import { useMediaStream } from "./useMediaStream";
|
||||
|
||||
interface Props {
|
||||
tileDescriptor: TileDescriptor;
|
||||
audioOutput: string;
|
||||
}
|
||||
|
||||
// Renders and <audio> element on the page playing the given stream
|
||||
// to the given output.
|
||||
export const AudioSink: React.FC<Props> = ({
|
||||
tileDescriptor,
|
||||
audioOutput,
|
||||
}: Props) => {
|
||||
const { localVolume, stream } = useCallFeed(tileDescriptor.callFeed);
|
||||
|
||||
const audioElementRef = useMediaStream(
|
||||
stream,
|
||||
audioOutput,
|
||||
// We don't compare the audioMuted flag of useCallFeed here, since unmuting
|
||||
// depends on to-device messages which may lag behind the audio actually
|
||||
// starting to flow over the stream
|
||||
tileDescriptor.isLocal,
|
||||
localVolume
|
||||
);
|
||||
|
||||
return <audio ref={audioElementRef} />;
|
||||
};
|
||||
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import { RoomMember } from "matrix-js-sdk";
|
||||
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
|
||||
import { LocalParticipant, RemoteParticipant } from "livekit-client";
|
||||
|
||||
import { ConnectionState } from "../room/useGroupCall";
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ export interface TileDescriptor {
|
|||
member: RoomMember;
|
||||
focused: boolean;
|
||||
presenter: boolean;
|
||||
callFeed?: CallFeed;
|
||||
isLocal?: boolean;
|
||||
connectionState: ConnectionState;
|
||||
sfuParticipant?: LocalParticipant | RemoteParticipant;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,14 +15,9 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useMemo } from "react";
|
||||
import { RoomMember } from "matrix-js-sdk";
|
||||
|
||||
import { VideoGrid, useVideoGridLayout } from "./VideoGrid";
|
||||
import { VideoTile } from "./VideoTile";
|
||||
import { useVideoGridLayout } from "./VideoGrid";
|
||||
import { Button } from "../button";
|
||||
import { ConnectionState } from "../room/useGroupCall";
|
||||
import { TileDescriptor } from "./TileDescriptor";
|
||||
|
||||
export default {
|
||||
title: "VideoGrid",
|
||||
|
|
@ -35,18 +30,6 @@ export const ParticipantsTest = () => {
|
|||
const { layout, setLayout } = useVideoGridLayout(false);
|
||||
const [participantCount, setParticipantCount] = useState(1);
|
||||
|
||||
const items: TileDescriptor[] = useMemo(
|
||||
() =>
|
||||
new Array(participantCount).fill(undefined).map((_, i) => ({
|
||||
id: (i + 1).toString(),
|
||||
member: new RoomMember("!fake:room.id", `@user${i}:fake.dummy`),
|
||||
focused: false,
|
||||
presenter: false,
|
||||
connectionState: ConnectionState.Connected,
|
||||
})),
|
||||
[participantCount]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: "flex", width: "100vw", height: "32px" }}>
|
||||
|
|
@ -68,26 +51,6 @@ export const ParticipantsTest = () => {
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100vw",
|
||||
height: "calc(100vh - 32px)",
|
||||
}}
|
||||
>
|
||||
<VideoGrid layout={layout} items={items}>
|
||||
{({ item, ...rest }) => (
|
||||
<VideoTile
|
||||
key={item.id}
|
||||
name={`User ${item.id}`}
|
||||
disableSpeakingIndicator={items.length < 3}
|
||||
connectionState={ConnectionState.Connected}
|
||||
debugInfo={{ width: undefined, height: undefined }}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
</VideoGrid>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,134 +18,63 @@ import React, { forwardRef } from "react";
|
|||
import { animated } from "@react-spring/web";
|
||||
import classNames from "classnames";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LocalParticipant, RemoteParticipant, Track } from "livekit-client";
|
||||
import { useMediaTrack } from "@livekit/components-react";
|
||||
|
||||
import styles from "./VideoTile.module.css";
|
||||
import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
|
||||
import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
|
||||
import { AudioButton, FullscreenButton } from "../button/Button";
|
||||
import { ConnectionState } from "../room/useGroupCall";
|
||||
import { CallFeedDebugInfo } from "./useCallFeed";
|
||||
import { useShowInspector } from "../settings/useSetting";
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
connectionState: ConnectionState;
|
||||
speaking?: boolean;
|
||||
audioMuted?: boolean;
|
||||
videoMuted?: boolean;
|
||||
screenshare?: boolean;
|
||||
avatar?: JSX.Element;
|
||||
mediaRef?: React.RefObject<MediaElement>;
|
||||
onOptionsPress?: () => void;
|
||||
localVolume?: number;
|
||||
hasAudio?: boolean;
|
||||
maximised?: boolean;
|
||||
fullscreen?: boolean;
|
||||
onFullscreen?: () => void;
|
||||
className?: string;
|
||||
showOptions?: boolean;
|
||||
isLocal?: boolean;
|
||||
disableSpeakingIndicator?: boolean;
|
||||
debugInfo: CallFeedDebugInfo;
|
||||
sfuParticipant: LocalParticipant | RemoteParticipant;
|
||||
}
|
||||
|
||||
export const VideoTile = forwardRef<HTMLDivElement, Props>(
|
||||
(
|
||||
{
|
||||
name,
|
||||
connectionState,
|
||||
speaking,
|
||||
audioMuted,
|
||||
videoMuted,
|
||||
screenshare,
|
||||
avatar,
|
||||
mediaRef,
|
||||
onOptionsPress,
|
||||
localVolume,
|
||||
hasAudio,
|
||||
maximised,
|
||||
fullscreen,
|
||||
onFullscreen,
|
||||
className,
|
||||
showOptions,
|
||||
isLocal,
|
||||
// TODO: disableSpeakingIndicator is not used atm.
|
||||
disableSpeakingIndicator,
|
||||
debugInfo,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [showInspector] = useShowInspector();
|
||||
({ name, avatar, maximised, className, sfuParticipant, ...rest }, ref) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const toolbarButtons: JSX.Element[] = [];
|
||||
if (connectionState == ConnectionState.Connected && !isLocal) {
|
||||
if (hasAudio) {
|
||||
toolbarButtons.push(
|
||||
<AudioButton
|
||||
key="localVolume"
|
||||
className={styles.button}
|
||||
volume={localVolume}
|
||||
onPress={onOptionsPress}
|
||||
/>
|
||||
);
|
||||
const videoEl = React.useRef<HTMLVideoElement>(null);
|
||||
const { isMuted: cameraMuted } = useMediaTrack(
|
||||
Track.Source.Camera,
|
||||
sfuParticipant,
|
||||
{
|
||||
element: videoEl,
|
||||
}
|
||||
);
|
||||
|
||||
if (screenshare) {
|
||||
toolbarButtons.push(
|
||||
<FullscreenButton
|
||||
key="fullscreen"
|
||||
className={styles.button}
|
||||
fullscreen={fullscreen}
|
||||
onPress={onFullscreen}
|
||||
/>
|
||||
);
|
||||
const audioEl = React.useRef<HTMLAudioElement>(null);
|
||||
const { isMuted: microphoneMuted } = useMediaTrack(
|
||||
Track.Source.Microphone,
|
||||
sfuParticipant,
|
||||
{
|
||||
element: audioEl,
|
||||
}
|
||||
}
|
||||
|
||||
let caption: string;
|
||||
switch (connectionState) {
|
||||
case ConnectionState.EstablishingCall:
|
||||
caption = t("{{name}} (Connecting...)", { name });
|
||||
break;
|
||||
case ConnectionState.WaitMedia:
|
||||
// not strictly true, but probably easier to understand than, "Waiting for media"
|
||||
caption = t("{{name}} (Waiting for video...)", { name });
|
||||
break;
|
||||
case ConnectionState.Connected:
|
||||
caption = name;
|
||||
break;
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<animated.div
|
||||
className={classNames(styles.videoTile, className, {
|
||||
[styles.isLocal]: isLocal,
|
||||
[styles.speaking]: speaking,
|
||||
[styles.muted]: audioMuted,
|
||||
[styles.screenshare]: screenshare,
|
||||
[styles.isLocal]: sfuParticipant.isLocal,
|
||||
[styles.speaking]: sfuParticipant.isSpeaking,
|
||||
[styles.muted]: microphoneMuted,
|
||||
[styles.screenshare]: false,
|
||||
[styles.maximised]: maximised,
|
||||
})}
|
||||
ref={ref}
|
||||
{...rest}
|
||||
>
|
||||
{showInspector && (
|
||||
<div className={classNames(styles.debugInfo)}>
|
||||
{JSON.stringify(debugInfo)}
|
||||
</div>
|
||||
)}
|
||||
{toolbarButtons.length > 0 && !maximised && (
|
||||
<div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
|
||||
)}
|
||||
{videoMuted && (
|
||||
{cameraMuted && (
|
||||
<>
|
||||
<div className={styles.videoMutedOverlay} />
|
||||
{avatar}
|
||||
</>
|
||||
)}
|
||||
{!maximised &&
|
||||
(screenshare ? (
|
||||
(sfuParticipant.isScreenShareEnabled ? (
|
||||
<div className={styles.presenterLabel}>
|
||||
<span>{t("{{name}} is presenting", { name })}</span>
|
||||
</div>
|
||||
|
|
@ -156,13 +85,15 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
|
|||
Mute state is currently sent over to-device messages, which
|
||||
aren't quite real-time, so this is an important kludge to make
|
||||
sure no one appears muted when they've clearly begun talking. */
|
||||
audioMuted && !videoMuted && !speaking && <MicMutedIcon />
|
||||
microphoneMuted &&
|
||||
!cameraMuted &&
|
||||
!sfuParticipant.isSpeaking && <MicMutedIcon />
|
||||
}
|
||||
{videoMuted && <VideoMutedIcon />}
|
||||
<span title={caption}>{caption}</span>
|
||||
{cameraMuted && <VideoMutedIcon />}
|
||||
</div>
|
||||
))}
|
||||
<video ref={mediaRef} playsInline disablePictureInPicture />
|
||||
<video ref={videoEl} />
|
||||
<audio ref={audioEl} />
|
||||
</animated.div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,17 +14,13 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
|
||||
import React from "react";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { useCallFeed } from "./useCallFeed";
|
||||
import { useSpatialMediaStream } from "./useMediaStream";
|
||||
import { ConnectionState } from "../room/useGroupCall";
|
||||
import { useRoomMemberName } from "./useRoomMemberName";
|
||||
import { VideoTile } from "./VideoTile";
|
||||
import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
|
||||
import { useModalTriggerState } from "../Modal";
|
||||
import { TileDescriptor } from "./TileDescriptor";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -36,12 +32,7 @@ interface Props {
|
|||
width: number,
|
||||
height: number
|
||||
) => JSX.Element;
|
||||
audioContext: AudioContext;
|
||||
audioDestination: AudioNode;
|
||||
disableSpeakingIndicator: boolean;
|
||||
maximised: boolean;
|
||||
fullscreen: boolean;
|
||||
onFullscreen: (item: TileDescriptor) => void;
|
||||
}
|
||||
|
||||
export function VideoTileContainer({
|
||||
|
|
@ -49,87 +40,36 @@ export function VideoTileContainer({
|
|||
width,
|
||||
height,
|
||||
getAvatar,
|
||||
audioContext,
|
||||
audioDestination,
|
||||
disableSpeakingIndicator,
|
||||
maximised,
|
||||
fullscreen,
|
||||
onFullscreen,
|
||||
...rest
|
||||
}: Props) {
|
||||
const {
|
||||
isLocal,
|
||||
audioMuted,
|
||||
videoMuted,
|
||||
localVolume,
|
||||
hasAudio,
|
||||
speaking,
|
||||
stream,
|
||||
purpose,
|
||||
debugInfo,
|
||||
} = useCallFeed(item.callFeed);
|
||||
const { rawDisplayName } = useRoomMemberName(item.member);
|
||||
const [tileRef, mediaRef] = useSpatialMediaStream(
|
||||
stream ?? null,
|
||||
audioContext,
|
||||
audioDestination,
|
||||
localVolume,
|
||||
// The feed is muted if it's local audio (because we don't want our own audio,
|
||||
// but it's a hook and we can't call it conditionally so we're stuck with it)
|
||||
// or if there's a maximised feed in which case we always render audio via audio
|
||||
// elements because we wire it up at the video tile container level and only one
|
||||
// video tile container is displayed.
|
||||
isLocal || maximised
|
||||
);
|
||||
const {
|
||||
modalState: videoTileSettingsModalState,
|
||||
modalProps: videoTileSettingsModalProps,
|
||||
} = useModalTriggerState();
|
||||
const onOptionsPress = () => {
|
||||
videoTileSettingsModalState.open();
|
||||
};
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onFullscreenCallback = useCallback(() => {
|
||||
onFullscreen(item);
|
||||
}, [onFullscreen, item]);
|
||||
|
||||
// Firefox doesn't respect the disablePictureInPicture attribute
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
|
||||
|
||||
useEffect(() => {
|
||||
item.callFeed?.setResolution(width, height);
|
||||
}, [width, height, item.callFeed]);
|
||||
|
||||
useEffect(() => {
|
||||
item.callFeed?.setIsVisible(true);
|
||||
}, [item.callFeed]);
|
||||
let caption: string;
|
||||
switch (item.connectionState) {
|
||||
case ConnectionState.EstablishingCall:
|
||||
caption = t("{{name}} (Connecting...)", { name });
|
||||
break;
|
||||
case ConnectionState.WaitMedia:
|
||||
// not strictly true, but probably easier to understand than, "Waiting for media"
|
||||
caption = t("{{name}} (Waiting for video...)", { name });
|
||||
break;
|
||||
case ConnectionState.Connected:
|
||||
caption = rawDisplayName;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<VideoTile
|
||||
isLocal={isLocal}
|
||||
speaking={speaking && !disableSpeakingIndicator}
|
||||
audioMuted={audioMuted}
|
||||
videoMuted={videoMuted}
|
||||
screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
|
||||
name={rawDisplayName}
|
||||
connectionState={item.connectionState}
|
||||
ref={tileRef}
|
||||
mediaRef={mediaRef}
|
||||
avatar={getAvatar && getAvatar(item.member, width, height)}
|
||||
onOptionsPress={onOptionsPress}
|
||||
localVolume={localVolume}
|
||||
hasAudio={hasAudio}
|
||||
maximised={maximised}
|
||||
fullscreen={fullscreen}
|
||||
onFullscreen={onFullscreenCallback}
|
||||
debugInfo={debugInfo}
|
||||
{...rest}
|
||||
/>
|
||||
{videoTileSettingsModalState.isOpen && !maximised && item.callFeed && (
|
||||
<VideoTileSettingsModal
|
||||
{...videoTileSettingsModalProps}
|
||||
feed={item.callFeed}
|
||||
{!item.sfuParticipant && <span title={caption}>{caption}</span>}
|
||||
{item.sfuParticipant && (
|
||||
<VideoTile
|
||||
sfuParticipant={item.sfuParticipant}
|
||||
name={rawDisplayName}
|
||||
avatar={getAvatar && getAvatar(item.member, width, height)}
|
||||
maximised={maximised}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.videoTileSettingsModal {
|
||||
width: 700px;
|
||||
height: 316px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin: 27px 34px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.localVolumePercentage {
|
||||
width: 3ch;
|
||||
}
|
||||
|
||||
.localVolumeSlider[type="range"] {
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
background-color: transparent;
|
||||
--slider-color: var(--quinary-content);
|
||||
--slider-height: 4px;
|
||||
--thumb-color: var(--accent);
|
||||
--thumb-radius: 100%;
|
||||
--thumb-size: 16px;
|
||||
--thumb-margin-top: -6px;
|
||||
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.localVolumeSlider[type="range"]::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
background-color: var(--slider-color);
|
||||
height: var(--slider-height);
|
||||
}
|
||||
.localVolumeSlider[type="range"]::-ms-track {
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
background-color: var(--slider-color);
|
||||
height: var(--slider-height);
|
||||
}
|
||||
.localVolumeSlider[type="range"]::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
background-color: var(--slider-color);
|
||||
height: var(--slider-height);
|
||||
}
|
||||
|
||||
.localVolumeSlider[type="range"]::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
height: var(--thumb-size);
|
||||
width: var(--thumb-size);
|
||||
margin-top: var(--thumb-margin-top);
|
||||
border-radius: var(--thumb-radius);
|
||||
background: var(--thumb-color);
|
||||
}
|
||||
.localVolumeSlider[type="range"]::-ms-thumb {
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
height: var(--thumb-size);
|
||||
width: var(--thumb-size);
|
||||
margin-top: var(--thumb-margin-top);
|
||||
border-radius: var(--thumb-radius);
|
||||
background: var(--thumb-color);
|
||||
}
|
||||
.localVolumeSlider[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
height: var(--thumb-size);
|
||||
width: var(--thumb-size);
|
||||
margin-top: var(--thumb-margin-top);
|
||||
border-radius: var(--thumb-radius);
|
||||
background: var(--thumb-color);
|
||||
}
|
||||
|
||||
.localVolumeSlider[type="range"]::-moz-range-progress {
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
height: var(--slider-height);
|
||||
background: var(--thumb-color);
|
||||
}
|
||||
.localVolumeSlider[type="range"]::-ms-fill-lower {
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
height: var(--slider-height);
|
||||
background: var(--thumb-color);
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { ChangeEvent, useState } from "react";
|
||||
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { FieldRow } from "../input/Input";
|
||||
import { Modal } from "../Modal";
|
||||
import styles from "./VideoTileSettingsModal.module.css";
|
||||
import { VolumeIcon } from "../button/VolumeIcon";
|
||||
|
||||
interface LocalVolumeProps {
|
||||
feed: CallFeed;
|
||||
}
|
||||
|
||||
const LocalVolume: React.FC<LocalVolumeProps> = ({
|
||||
feed,
|
||||
}: LocalVolumeProps) => {
|
||||
const [localVolume, setLocalVolume] = useState<number>(feed.getLocalVolume());
|
||||
|
||||
const onLocalVolumeChanged = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const value: number = +event.target.value;
|
||||
setLocalVolume(value);
|
||||
feed.setLocalVolume(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FieldRow>
|
||||
<VolumeIcon volume={localVolume} />
|
||||
<input
|
||||
className={styles.localVolumeSlider}
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={localVolume}
|
||||
onChange={onLocalVolumeChanged}
|
||||
/>
|
||||
</FieldRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// TODO: Extend ModalProps
|
||||
interface Props {
|
||||
feed: CallFeed;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const VideoTileSettingsModal = ({ feed, onClose, ...rest }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className={styles.videoTileSettingsModal}
|
||||
title={t("Local volume")}
|
||||
isDismissable
|
||||
mobileFullScreen
|
||||
onClose={onClose}
|
||||
{...rest}
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<LocalVolume feed={feed} />
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 New Vector Ltd
|
||||
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { useEventTarget } from "../useEvents";
|
||||
import { TileDescriptor } from "./TileDescriptor";
|
||||
import { useCallFeed } from "./useCallFeed";
|
||||
|
||||
export function useFullscreen(ref: React.RefObject<HTMLElement>): {
|
||||
toggleFullscreen: (participant: TileDescriptor) => void;
|
||||
fullscreenParticipant: TileDescriptor | null;
|
||||
} {
|
||||
const [fullscreenParticipant, setFullscreenParticipant] =
|
||||
useState<TileDescriptor | null>(null);
|
||||
const { disposed } = useCallFeed(fullscreenParticipant?.callFeed);
|
||||
|
||||
const toggleFullscreen = useCallback(
|
||||
(tileDes: TileDescriptor) => {
|
||||
if (fullscreenParticipant) {
|
||||
document.exitFullscreen();
|
||||
setFullscreenParticipant(null);
|
||||
} else {
|
||||
try {
|
||||
if (ref.current.requestFullscreen) {
|
||||
ref.current.requestFullscreen();
|
||||
} else if (ref.current.webkitRequestFullscreen) {
|
||||
ref.current.webkitRequestFullscreen();
|
||||
} else {
|
||||
logger.error("No available fullscreen API!");
|
||||
}
|
||||
setFullscreenParticipant(tileDes);
|
||||
} catch (error) {
|
||||
console.warn("Failed to fullscreen:", error);
|
||||
}
|
||||
}
|
||||
},
|
||||
[fullscreenParticipant, setFullscreenParticipant, ref]
|
||||
);
|
||||
|
||||
const onFullscreenChanged = useCallback(() => {
|
||||
if (!document.fullscreenElement && !document.webkitFullscreenElement) {
|
||||
setFullscreenParticipant(null);
|
||||
}
|
||||
}, [setFullscreenParticipant]);
|
||||
|
||||
useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged);
|
||||
useEventTarget(ref.current, "webkitfullscreenchange", onFullscreenChanged);
|
||||
|
||||
useEffect(() => {
|
||||
if (disposed) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else {
|
||||
logger.error("No available fullscreen API!");
|
||||
}
|
||||
setFullscreenParticipant(null);
|
||||
}
|
||||
}, [disposed]);
|
||||
|
||||
return { toggleFullscreen, fullscreenParticipant };
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue