Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
remove Lobby component
Browse files Browse the repository at this point in the history 
Signed-off-by: Timo K <toger5@hotmail.de>
  • Loading branch information
@toger5
toger5 committed Dec 14, 2023
1 parent 6d5ac0b commit f984491
Showing 1 changed file with 0 additions and 169 deletions.
169 changes: 0 additions & 169 deletions src/components/views/voip/CallView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,175 +113,6 @@ const DeviceButton: FC<DeviceButtonProps> = ({
);
};

interface LobbyProps {
room: Room;
connect: () => Promise<void>;
joinCallButtonDisabledTooltip?: string;
children?: ReactNode;
}

export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabledTooltip, connect, children }) => {
const [connecting, setConnecting] = useState(false);
const me = useMemo(() => room.getMember(room.myUserId)!, [room]);
const videoRef = useRef<HTMLVideoElement>(null);

const [videoInputId, setVideoInputId] = useState<string>(() => MediaDeviceHandler.getVideoInput());

const [audioMuted, setAudioMuted] = useState(() => MediaDeviceHandler.startWithAudioMuted);
const [videoMuted, setVideoMuted] = useState(() => MediaDeviceHandler.startWithVideoMuted);

const toggleAudio = useCallback(() => {
MediaDeviceHandler.startWithAudioMuted = !audioMuted;
setAudioMuted(!audioMuted);
}, [audioMuted, setAudioMuted]);
const toggleVideo = useCallback(() => {
MediaDeviceHandler.startWithVideoMuted = !videoMuted;
setVideoMuted(!videoMuted);
}, [videoMuted, setVideoMuted]);

// In case we can not fetch media devices we should mute the devices
const handleMediaDeviceFailing = (message: string): void => {
MediaDeviceHandler.startWithAudioMuted = true;
MediaDeviceHandler.startWithVideoMuted = true;
logger.warn(message);
};

const [videoStream, audioInputs, videoInputs] = useAsyncMemo(
async (): Promise<[MediaStream | null, MediaDeviceInfo[], MediaDeviceInfo[]]> => {
let devices: IMediaDevices | undefined;
try {
devices = await MediaDeviceHandler.getDevices();
if (devices === undefined) {
handleMediaDeviceFailing("Could not access devices!");
return [null, [], []];
}
} catch (error) {
handleMediaDeviceFailing(`Unable to get Media Devices: ${error}`);
return [null, [], []];
}

// We get the preview stream before requesting devices: this is because
// we need (in some browsers) an active media stream in order to get
// non-blank labels for the devices.
let stream: MediaStream | null = null;

try {
if (devices!.audioinput.length > 0) {
// Holding just an audio stream will be enough to get us all device labels, so
// if video is muted, don't bother requesting video.
stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: !videoMuted && devices!.videoinput.length > 0 && { deviceId: videoInputId },
});
} else if (devices!.videoinput.length > 0) {
// We have to resort to a video stream, even if video is supposed to be muted.
stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: videoInputId } });
}
} catch (e) {
logger.warn(`Failed to get stream for device ${videoInputId}`, e);
handleMediaDeviceFailing(`Have access to Device list but unable to read from Media Devices`);
}

// Refresh the devices now that we hold a stream
if (stream !== null) devices = await MediaDeviceHandler.getDevices();

// If video is muted, we don't actually want the stream, so we can get rid of it now.
if (videoMuted) {
stream?.getTracks().forEach((t) => t.stop());
stream = null;
}

return [stream, devices?.audioinput ?? [], devices?.videoinput ?? []];
},
[videoInputId, videoMuted],
[null, [], []],
);

const setAudioInput = useCallback((device: MediaDeviceInfo) => {
MediaDeviceHandler.instance.setAudioInput(device.deviceId);
}, []);
const setVideoInput = useCallback((device: MediaDeviceInfo) => {
MediaDeviceHandler.instance.setVideoInput(device.deviceId);
setVideoInputId(device.deviceId);
}, []);

useEffect(() => {
if (videoStream) {
const videoElement = videoRef.current!;
videoElement.srcObject = videoStream;
videoElement.play();

return () => {
videoStream.getTracks().forEach((track) => track.stop());
videoElement.srcObject = null;
};
}
}, [videoStream]);

const onConnectClick = useCallback(
async (ev: ButtonEvent): Promise<void> => {
ev.preventDefault();
setConnecting(true);
try {
await connect();
} catch (e) {
logger.error(e);
setConnecting(false);
}
},
[connect, setConnecting],
);

return (
<div className="mx_CallView_lobby">
{children}
<div className="mx_CallView_preview">
<MemberAvatar key={me.userId} member={me} size="200px" resizeMethod="scale" />
<video
ref={videoRef}
style={{ visibility: videoMuted ? "hidden" : undefined }}
muted
playsInline
disablePictureInPicture
/>
<div className="mx_CallView_controls">
<DeviceButton
kind="audio"
devices={audioInputs}
setDevice={setAudioInput}
deviceListLabel={_t("voip|audio_devices")}
muted={audioMuted}
disabled={connecting}
toggle={toggleAudio}
unmutedTitle={_t("voip|disable_microphone")}
mutedTitle={_t("voip|enable_microphone")}
/>
<DeviceButton
kind="video"
devices={videoInputs}
setDevice={setVideoInput}
deviceListLabel={_t("voip|video_devices")}
muted={videoMuted}
disabled={connecting}
toggle={toggleVideo}
unmutedTitle={_t("voip|disable_camera")}
mutedTitle={_t("voip|enable_camera")}
/>
</div>
</div>
<AccessibleTooltipButton
className="mx_CallView_connectButton"
kind="primary"
disabled={connecting || joinCallButtonDisabledTooltip !== undefined}
onClick={onConnectClick}
label={_t("action|join")}
tooltip={connecting ? _t("voip|connecting") : joinCallButtonDisabledTooltip}
alignment={Alignment.Bottom}
/>
</div>
);
};

interface StartCallViewProps {
room: Room;
resizing: boolean;
Expand Down

0 comments on commit f984491

Please sign in to comment.