mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-06 23:30:28 +03:00
add join, screen_state, and hang up handling as well as logging state based on join + hang up actions
This commit is contained in:
parent
b4d9828017
commit
ec741423c7
1 changed files with 30 additions and 6 deletions
|
|
@ -9,6 +9,8 @@ import React, {
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { logger } from 'matrix-js-sdk/lib/logger';
|
import { logger } from 'matrix-js-sdk/lib/logger';
|
||||||
import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
|
import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||||
|
|
||||||
interface MediaStatePayload {
|
interface MediaStatePayload {
|
||||||
data?: {
|
data?: {
|
||||||
|
|
@ -19,7 +21,8 @@ interface MediaStatePayload {
|
||||||
|
|
||||||
const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
|
const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
|
||||||
const WIDGET_HANGUP_ACTION = 'im.vector.hangup';
|
const WIDGET_HANGUP_ACTION = 'im.vector.hangup';
|
||||||
const SET_MEDIA_STATE_ACTION = 'io.element.device_mute';
|
const WIDGET_ON_SCREEN_ACTION = 'set_always_on_screen';
|
||||||
|
const WIDGET_JOIN_ACTION = 'io.element.join';
|
||||||
|
|
||||||
interface CallContextState {
|
interface CallContextState {
|
||||||
activeCallRoomId: string | null;
|
activeCallRoomId: string | null;
|
||||||
|
|
@ -37,6 +40,7 @@ interface CallContextState {
|
||||||
isAudioEnabled: boolean;
|
isAudioEnabled: boolean;
|
||||||
isVideoEnabled: boolean;
|
isVideoEnabled: boolean;
|
||||||
isChatOpen: boolean;
|
isChatOpen: boolean;
|
||||||
|
isCallActive: boolean;
|
||||||
toggleAudio: () => Promise<void>;
|
toggleAudio: () => Promise<void>;
|
||||||
toggleVideo: () => Promise<void>;
|
toggleVideo: () => Promise<void>;
|
||||||
toggleChat: () => Promise<void>;
|
toggleChat: () => Promise<void>;
|
||||||
|
|
@ -51,6 +55,7 @@ interface CallProviderProps {
|
||||||
const DEFAULT_AUDIO_ENABLED = true;
|
const DEFAULT_AUDIO_ENABLED = true;
|
||||||
const DEFAULT_VIDEO_ENABLED = false;
|
const DEFAULT_VIDEO_ENABLED = false;
|
||||||
const DEFAULT_CHAT_OPENED = false;
|
const DEFAULT_CHAT_OPENED = false;
|
||||||
|
const DEFAULT_CALL_ACTIVE = false;
|
||||||
|
|
||||||
export function CallProvider({ children }: CallProviderProps) {
|
export function CallProvider({ children }: CallProviderProps) {
|
||||||
const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
|
const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
|
||||||
|
|
@ -62,6 +67,11 @@ export function CallProvider({ children }: CallProviderProps) {
|
||||||
const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
|
const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
|
||||||
const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
|
const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
|
||||||
const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
|
const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
|
||||||
|
const [isCallActive, setIsCallActive] = useState<boolean>(DEFAULT_CALL_ACTIVE);
|
||||||
|
|
||||||
|
const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
|
||||||
|
const mx = useMatrixClient();
|
||||||
|
const room = mx.getRoom(viewedRoomId);
|
||||||
|
|
||||||
const resetMediaState = useCallback(() => {
|
const resetMediaState = useCallback(() => {
|
||||||
logger.debug('CallContext: Resetting media state to defaults.');
|
logger.debug('CallContext: Resetting media state to defaults.');
|
||||||
|
|
@ -94,7 +104,7 @@ export function CallProvider({ children }: CallProviderProps) {
|
||||||
|
|
||||||
const hangUp = useCallback(() => {
|
const hangUp = useCallback(() => {
|
||||||
logger.debug(`CallContext: Hang up called.`);
|
logger.debug(`CallContext: Hang up called.`);
|
||||||
activeClientWidgetApi?.transport.send(`action:${WIDGET_HANGUP_ACTION}`, {});
|
// activeClientWidgetApi?.transport.send(`action:${WIDGET_HANGUP_ACTION}`, {});
|
||||||
setActiveCallRoomIdState(null);
|
setActiveCallRoomIdState(null);
|
||||||
logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
|
logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
|
||||||
setActiveClientWidgetApiState(null);
|
setActiveClientWidgetApiState(null);
|
||||||
|
|
@ -149,7 +159,8 @@ export function CallProvider({ children }: CallProviderProps) {
|
||||||
`CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
|
`CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
|
||||||
ev
|
ev
|
||||||
);
|
);
|
||||||
hangUp();
|
setIsCallActive(false);
|
||||||
|
// hangUp();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
|
const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
|
||||||
|
|
@ -169,11 +180,23 @@ export function CallProvider({ children }: CallProviderProps) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleOnScreenStateUpdate = (ev: CustomEvent) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
activeClientWidgetApi.transport.reply(ev.detail, {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleJoin = (ev: CustomEvent) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
setIsCallActive(true);
|
||||||
|
};
|
||||||
|
|
||||||
logger.debug(
|
logger.debug(
|
||||||
`CallContext: Setting up listeners for clientWidgetApi in room ${activeCallRoomId}`
|
`CallContext: Setting up listeners for clientWidgetApi in room ${activeCallRoomId}`
|
||||||
);
|
);
|
||||||
clientWidgetApi.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup); // Use standard hangup action name
|
clientWidgetApi.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
|
||||||
clientWidgetApi.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
|
clientWidgetApi.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
|
||||||
|
clientWidgetApi.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
|
||||||
|
clientWidgetApi.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
logger.debug(
|
logger.debug(
|
||||||
|
|
@ -192,6 +215,7 @@ export function CallProvider({ children }: CallProviderProps) {
|
||||||
isChatOpen,
|
isChatOpen,
|
||||||
isAudioEnabled,
|
isAudioEnabled,
|
||||||
isVideoEnabled,
|
isVideoEnabled,
|
||||||
|
isCallActive,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const sendWidgetAction = useCallback(
|
const sendWidgetAction = useCallback(
|
||||||
|
|
@ -227,7 +251,7 @@ export function CallProvider({ children }: CallProviderProps) {
|
||||||
logger.debug(`CallContext: Toggling audio. New state: enabled=${newState}`);
|
logger.debug(`CallContext: Toggling audio. New state: enabled=${newState}`);
|
||||||
setIsAudioEnabledState(newState);
|
setIsAudioEnabledState(newState);
|
||||||
try {
|
try {
|
||||||
await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
|
await sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
|
||||||
audio_enabled: newState,
|
audio_enabled: newState,
|
||||||
video_enabled: isVideoEnabled,
|
video_enabled: isVideoEnabled,
|
||||||
});
|
});
|
||||||
|
|
@ -244,7 +268,7 @@ export function CallProvider({ children }: CallProviderProps) {
|
||||||
logger.debug(`CallContext: Toggling video. New state: enabled=${newState}`);
|
logger.debug(`CallContext: Toggling video. New state: enabled=${newState}`);
|
||||||
setIsVideoEnabledState(newState);
|
setIsVideoEnabledState(newState);
|
||||||
try {
|
try {
|
||||||
await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
|
await sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
|
||||||
audio_enabled: isAudioEnabled,
|
audio_enabled: isAudioEnabled,
|
||||||
video_enabled: newState,
|
video_enabled: newState,
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue