From e1a080e50c92ec85f2a7e1ef03d2b1fdf42b9bd0 Mon Sep 17 00:00:00 2001 From: Gigiaj Date: Mon, 14 Apr 2025 09:43:36 -0500 Subject: [PATCH] clean up roomview removing unursed and refactoring superfluous to own files --- src/app/features/room/RoomView.tsx | 477 ++++------------------------- 1 file changed, 54 insertions(+), 423 deletions(-) diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index 9cccbd3e..46c62f62 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -1,33 +1,31 @@ import React, { useCallback, useRef, useEffect } from 'react'; import { Box, Text, config } from 'folds'; // Assuming 'folds' is a UI library -import { CallEvent, ClientEvent, Direction, EventType, MatrixClient, MatrixEvent, MatrixEventEvent, Room, RoomStateEvent } from 'matrix-js-sdk'; -import { KnownMembership } from "matrix-js-sdk/src/types"; +import { EventType, Room } from 'matrix-js-sdk'; import { ReactEditor } from 'slate-react'; import { isKeyHotkey } from 'is-hotkey'; -import { useStateEvent } from '../../hooks/useStateEvent'; // Assuming custom hook -import { StateEvent } from '../../../types/matrix/room'; // Assuming custom types -import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels'; // Assuming custom hook -import { useMatrixClient } from '../../hooks/useMatrixClient'; // Assuming custom hook -import { useEditor } from '../../components/editor'; // Assuming custom hook/component +import { ClientWidgetApi } from 'matrix-widget-api'; +import { logger } from 'matrix-js-sdk/lib/logger'; +import { useStateEvent } from '../../hooks/useStateEvent'; +import { StateEvent } from '../../../types/matrix/room'; +import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels'; +import { useMatrixClient } from '../../hooks/useMatrixClient'; +import { useEditor } from '../../components/editor'; import { RoomInputPlaceholder } from './RoomInputPlaceholder'; import { RoomTimeline } from './RoomTimeline'; import { RoomViewTyping } from './RoomViewTyping'; import { RoomTombstone } from './RoomTombstone'; import { RoomInput } from './RoomInput'; import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing'; -import { Page } from '../../components/page'; // Assuming custom component +import { Page } from '../../components/page'; import { RoomViewHeader } from './RoomViewHeader'; -import { useKeyDown } from '../../hooks/useKeyDown'; // Assuming custom hook -import { editableActiveElement } from '../../utils/dom'; // Assuming utility function -import navigation from '../../../client/state/navigation'; // Assuming navigation state management -import { settingsAtom } from '../../state/settings'; // Assuming state management (e.g., Jotai/Recoil) -import { useSetting } from '../../state/hooks/settings'; // Assuming custom hook -import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags'; // Assuming custom hook -import { useTheme } from '../../hooks/useTheme'; // Assuming custom hook -import { logger } from 'matrix-js-sdk/lib/logger'; -import { ClientWidgetApi, IRoomEvent, IStickyActionRequest, IWidget, IWidgetData, MatrixCapabilities, Widget, WidgetApiFromWidgetAction, type IWidgetApiRequestEmptyData, WidgetKind, IWidgetApiRequest } from 'matrix-widget-api'; -import { SmallWidgetDriver } from './SmallWidgetDriver'; // Assuming custom widget driver -import EventEmitter from 'events'; +import { useKeyDown } from '../../hooks/useKeyDown'; +import { editableActiveElement } from '../../utils/dom'; +import navigation from '../../../client/state/navigation'; +import { settingsAtom } from '../../state/settings'; +import { useSetting } from '../../state/hooks/settings'; +import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags'; +import { useTheme } from '../../hooks/useTheme'; +import { createVirtualWidget, Edget, getWidgetData, getWidgetUrl } from './SmallWidget'; // --- Constants --- const FN_KEYS_REGEX = /^F\d+$/; @@ -73,379 +71,6 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => { return true; }; -/** - * Generates the URL for the Element Call widget. - * @param mx - The MatrixClient instance. - * @param roomId - The ID of the room. - * @returns The generated URL object. - */ -const getWidgetUrl = (mx: MatrixClient, roomId: string): URL => { - const baseUrl = window.location.origin; - // Ensure the path is correct relative to the application's structure - let url = new URL("./dist/element-call/dist/index.html", baseUrl); - - const params = new URLSearchParams({ - embed: "true", - widgetId: `element-call-${roomId}`, - preload: "true", // Consider if preloading is always desired - skipLobby: "false", // Configurable based on needs - returnToLobby: "true", - perParticipantE2EE: "true", - hideHeader: "true", - userId: mx.getUserId()!, - deviceId: mx.getDeviceId()!, - roomId: roomId, - baseUrl: mx.baseUrl!, // Ensure baseUrl is available - parentUrl: window.location.origin, // Optional, might be needed by widget - // lang: getCurrentLanguage().replace("_", "-"), // Add language if needed - // theme: "$org.matrix.msc2873.client_theme", // Add theme if needed - }); - - // Replace '$' encoded as %24 if necessary for template variables - const replacedParams = params.toString().replace(/%24/g, "$"); - url.hash = `#?${replacedParams}`; // Use #? for query parameters in the hash - - logger.info("Generated Element Call Widget URL:", url.toString()); // Use info level for clarity - return url; -} - -// --- Widget Interfaces and Classes --- - -// Interface describing the data structure for the widget -interface IApp extends IWidget { - "client": MatrixClient; - "roomId": string; - "eventId"?: string; - "avatar_url"?: string; - "io.element.managed_hybrid"?: boolean; -} - -// Wrapper class for the widget definition -class CinnyWidget extends Widget { - public constructor(private rawDefinition: IApp) { - super(rawDefinition); - } -} - -// Custom EventEmitter class to manage widget communication setup -class Edget extends EventEmitter { - private client: MatrixClient; - private messaging: ClientWidgetApi | null = null; - private mockWidget: CinnyWidget; - private roomId?: string; - private type: string; // Type of the widget (e.g., 'm.call') - private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID - private readonly eventsToFeed = new WeakSet(); - private stickyPromise?: () => Promise; - - - constructor(private iapp: IApp) { - super(); - this.client = iapp.client; - this.roomId = iapp.roomId; - this.type = iapp.type; - this.mockWidget = new CinnyWidget(iapp); - } - - /** - * Initializes the widget messaging API. - * @param iframe - The HTMLIFrameElement to bind to. - * @returns The initialized ClientWidgetApi instance. - */ - startMessaging(iframe: HTMLIFrameElement): ClientWidgetApi { - // Ensure the driver is correctly instantiated - // The capabilities array might need adjustment based on required permissions - const driver = new SmallWidgetDriver(this.client, [], this.mockWidget, WidgetKind.Room, true, this.roomId); - - this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver); - - // Emit events during the widget lifecycle - this.messaging.on("preparing", () => this.emit("preparing")); - this.messaging.on("error:preparing", (err: unknown) => this.emit("error:preparing", err)); - this.messaging.once("ready", () => this.emit("ready")); - // this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified")); // Uncomment if needed - - // Populate the map of "read up to" events for this widget with the current event in every room. - // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget - // requests timeline capabilities in other rooms down the road. It's just easier to manage here. - for (const room of this.client.getRooms()) { - // Timelines are most recent last - const events = room.getLiveTimeline()?.getEvents() || []; - const roomEvent = events[events.length - 1]; - if (!roomEvent) continue; // force later code to think the room is fresh - this.readUpToMap[room.roomId] = roomEvent.getId()!; - } - - this.messaging.on("action:org.matrix.msc2876.read_events", ((ev: CustomEvent) => { - ev.preventDefault(); - const room = this.client.getRoom(this.roomId); - logger.error("CAN WE GET MUCH HIGHER"); - - if (room === null) return []; - const state = room.getLiveTimeline().getState(Direction.Forward); - if (state === undefined) return []; - - //logger.error("CAN WE GET MUCH HIGHER"); - const event = state.getStateEvents(ev.type, 'true'); - logger.error(event); - logger.error(ev); - logger.error(state); - if (true === undefined) { - return state.getStateEvents(ev.type).map((e) => e.getEffectiveEvent() as IRoomEvent); - } - //const event = state.getStateEvents(ev.type, 'true'); - logger.error(event); - return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent]; - - this.messaging?.transport.reply(ev.detail, {event: ['CATS BABY']}); - })); - - - - - - this.client.on(ClientEvent.Event, this.onEvent); - this.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted); - //this.client.on(RoomStateEvent.Events, this.onStateUpdate); - this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent); - //this.client.on(RoomStateEvent.Events, this.onReadEvent); - // this.messaging.setViewedRoomId(this.roomId ?? null); - this.messaging.on( - `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`, - async (ev: CustomEvent) => { - if (this.messaging?.hasCapability(MatrixCapabilities.AlwaysOnScreen)) { - ev.preventDefault(); - if (ev.detail.data.value) { - // If the widget wants to become sticky we wait for the stickyPromise to resolve - if (this.stickyPromise) await this.stickyPromise(); - this.messaging.transport.reply(ev.detail, {}); - } - // Stop being persistent can be done instantly - //MAKE PERSISTENT HERE - // Send the ack after the widget actually has become sticky. - ; - } - }, - ); - - - logger.info(`Widget messaging started for widgetId: ${this.mockWidget.id}`); - return this.messaging; - } - private onEvent = (ev: MatrixEvent): void => { - this.client.decryptEventIfNeeded(ev); - this.feedEvent(ev); - }; - - private onEventDecrypted = (ev: MatrixEvent): void => { - this.feedEvent(ev); - }; - - private onReadEvent = (ev: MatrixEvent): void => { - this.feedEvent(ev); - } - - - private onStateUpdate = (ev: MatrixEvent): void => { - if (this.messaging === null) return; - const raw = ev.getEffectiveEvent(); - logger.error(raw); - this.messaging.feedEvent(raw as IRoomEvent).catch((e) => { - logger.error("Error sending state update to widget: ", e); - }); - }; - - private onToDeviceEvent = async (ev: MatrixEvent): Promise => { - await this.client.decryptEventIfNeeded(ev); - if (ev.isDecryptionFailure()) return; - await this.messaging?.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted()); -}; - - /** - * Determines whether the event comes from a room that we've been invited to - * (in which case we likely don't have the full timeline). - */ - private isFromInvite(ev: MatrixEvent): boolean { - const room = this.client.getRoom(ev.getRoomId()); - return room?.getMyMembership() === KnownMembership.Invite; - } - - /** - * Determines whether the event has a relation to an unknown parent. - */ - private relatesToUnknown(ev: MatrixEvent): boolean { - // Replies to unknown events don't count - if (!ev.relationEventId || ev.replyEventId) return false; - const room = this.client.getRoom(ev.getRoomId()); - return room === null || !room.findEventById(ev.relationEventId); - } - - private arrayFastClone(a: T[]): T[] { - return a.slice(0, a.length); - } - - private advanceReadUpToMarker(ev: MatrixEvent): boolean { - const evId = ev.getId(); - if (evId === undefined) return false; - const roomId = ev.getRoomId(); - if (roomId === undefined) return false; - const room = this.client.getRoom(roomId); - if (room === null) return false; - - const upToEventId = this.readUpToMap[ev.getRoomId()!]; - if (!upToEventId) { - // There's no marker yet; start it at this event - this.readUpToMap[roomId] = evId; - return true; - } - - // Small optimization for exact match (skip the search) - if (upToEventId === evId) return false; - - // Timelines are most recent last, so reverse the order and limit ourselves to 100 events - // to avoid overusing the CPU. - const timeline = room.getLiveTimeline(); - const events = this.arrayFastClone(timeline.getEvents()).reverse().slice(0, 100); - - for (const timelineEvent of events) { - if (timelineEvent.getId() === upToEventId) { - // The event must be somewhere before the "read up to" marker - return false; - } else if (timelineEvent.getId() === ev.getId()) { - // The event is after the marker; advance it - this.readUpToMap[roomId] = evId; - return true; - } - } - - // We can't say for sure whether the widget has seen the event; let's - // just assume that it has - return false; -} - - -private feedEvent(ev: MatrixEvent): void { - if (this.messaging === null) return; - - if ( - // If we had decided earlier to feed this event to the widget, but - // it just wasn't ready, give it another try - this.eventsToFeed.delete(ev) || - // Skip marker timeline check for events with relations to unknown parent because these - // events are not added to the timeline here and will be ignored otherwise: - // https://github.com/matrix-org/matrix-js-sdk/blob/d3dfcd924201d71b434af3d77343b5229b6ed75e/src/models/room.ts#L2207-L2213 - this.relatesToUnknown(ev) || - // Skip marker timeline check for rooms where membership is - // 'invite', otherwise the membership event from the invitation room - // will advance the marker and new state events will not be - // forwarded to the widget. - this.isFromInvite(ev) || - // Check whether this event would be before or after our "read up to" marker. If it's - // before, or we can't decide, then we assume the widget will have already seen the event. - // If the event is after, or we don't have a marker for the room, then the marker will advance and we'll - // send it through. - // This approach of "read up to" prevents widgets receiving decryption spam from startup or - // receiving ancient events from backfill and such. - this.advanceReadUpToMarker(ev) - ) { - // If the event is still being decrypted, remember that we want to - // feed it to the widget (even if not strictly in the order given by - // the timeline) and get back to it later - if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) { - this.eventsToFeed.add(ev); - } else { - const raw = ev.getEffectiveEvent(); - this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch((e) => { - logger.error("Error sending event to widget: ", e); - }); - } - } -} - - /** - * Stops the widget messaging and cleans up resources. - */ - stopMessaging() { - if (this.messaging) { - // Potentially call stop() or remove listeners if the API provides such methods - // this.messaging.stop(); // Example if a stop method exists - this.messaging.removeAllListeners(); // Remove listeners attached by Edget - logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`); - this.messaging = null; - } - // Clean up driver resources if necessary - // driver.stop(); // Example - } -} - -/** - * Creates the data object for the widget. - * @param client - The MatrixClient instance. - * @param roomId - The ID of the room. - * @param currentData - Existing widget data. - * @param overwriteData - Data to merge or overwrite. - * @returns The final widget data object. - */ -const getWidgetData = (client: MatrixClient, roomId: string, currentData: object, overwriteData: object): IWidgetData => { - // Example: Determine E2EE based on room state if needed - let perParticipantE2EE = true; // Default or based on logic - // const roomEncryption = client.getRoom(roomId)?.currentState.getStateEvents(EventType.RoomEncryption, ""); - // if (roomEncryption) perParticipantE2EE = true; // Simplified example - - return { - ...currentData, - ...overwriteData, - perParticipantE2EE, - }; -}; - -/** - * Creates a virtual widget definition (IApp). - * @param client - MatrixClient instance. - * @param id - Widget ID. - * @param creatorUserId - User ID of the creator. - * @param name - Widget display name. - * @param type - Widget type (e.g., 'm.call'). - * @param url - Widget URL. - * @param waitForIframeLoad - Whether to wait for iframe load signal. - * @param data - Widget data. - * @param roomId - Room ID. - * @returns The IApp widget definition. - */ -const createVirtualWidget = ( - client: MatrixClient, - id: string, - creatorUserId: string, - name: string, - type: string, - url: URL, - waitForIframeLoad: boolean, - data: IWidgetData, - roomId: string -): IApp => { - return { - client, - id, - creatorUserId, - name, - type, - url: url.toString(), // Store URL as string in the definition - waitForIframeLoad, - data, - roomId, - // Add other required fields from IWidget if necessary - sender: creatorUserId, // Example: Assuming sender is the creator - content: { // Example content structure - type, - url: url.toString(), - name, - data, - creatorUserId, - } - }; -}; - - // --- RoomView Component --- export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { @@ -465,7 +90,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { const powerLevels = usePowerLevelsContext(); const { getPowerLevel, canSendEvent } = usePowerLevelsAPI(powerLevels); const myUserId = mx.getUserId(); - const canMessage = myUserId ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId)) : false; + const canMessage = myUserId + ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId)) + : false; const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels); const theme = useTheme(); const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags); @@ -480,7 +107,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { if (editableActiveElement()) return; // Don't focus if a modal is likely open if (document.querySelector('.ReactModalPortal > *') || navigation.isRawModalVisible) { - return; + return; } // Don't focus if in a call view (no text editor) if (isCall) return; @@ -488,7 +115,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { // Check if the key pressed should trigger focus or is paste hotkey if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) { if (editor) { - ReactEditor.focus(editor); + ReactEditor.focus(editor); } } }, @@ -520,11 +147,13 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { 'm.call', // Widget type url, false, // waitForIframeLoad - false as we manually control src loading - getWidgetData( // Widget data + getWidgetData( + // Widget data mx, roomId, {}, // Initial data (can be fetched if needed) - { // Overwrite/specific data + { + // Overwrite/specific data skipLobby: true, // Example configuration preload: false, // Set preload based on whether you want background loading returnToLobby: false, // Example configuration @@ -543,15 +172,15 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { widgetApiRef.current = widgetApi; // Store API instance // Listen for the 'ready' event from the widget API - widgetApi.once("ready", () => { - logger.info(`Element Call widget is ready for room ${roomId}.`); - // Perform actions needed once the widget confirms it's ready - // Example: widgetApi.transport.send("action", { data: "..." }); + widgetApi.once('ready', () => { + logger.info(`Element Call widget is ready for room ${roomId}.`); + // Perform actions needed once the widget confirms it's ready + // Example: widgetApi.transport.send("action", { data: "..." }); }); - widgetApi.on("action:im.vector.hangup", () => { - logger.info(`Received hangup action from widget in room ${roomId}.`); - // Handle hangup logic (e.g., navigate away, update room state) + widgetApi.on('action:im.vector.hangup', () => { + logger.info(`Received hangup action from widget in room ${roomId}.`); + // Handle hangup logic (e.g., navigate away, update room state) }); // Add other necessary event listeners from the widget API @@ -560,7 +189,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { // 4. Set the iframe src *after* messaging is initialized logger.info(`Setting iframe src for room ${roomId}: ${url.toString()}`); iframeElement.src = url.toString(); - } catch (error) { logger.error(`Error initializing widget messaging for room ${roomId}:`, error); // Handle initialization error (e.g., show an error message to the user) @@ -578,8 +206,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { // Clear iframe src to stop activity and free resources if (iframeRef.current) { - iframeRef.current.src = 'about:blank'; - logger.info(`Cleared iframe src for room ${roomId}`); + iframeRef.current.src = 'about:blank'; + logger.info(`Cleared iframe src for room ${roomId}`); } }; } else { @@ -587,7 +215,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { // (This might be redundant if component unmounts/remounts correctly, but safe) if (widgetApiRef.current && iframeRef.current) { logger.info(`Room ${roomId} is no longer a call room, ensuring cleanup.`); - if (edgetRef.current) { + if (edgetRef.current) { edgetRef.current.stopMessaging(); edgetRef.current = null; } @@ -598,32 +226,33 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) { // Explicitly return undefined if not a call room or no cleanup needed initially return undefined; - }, [isCall, mx, roomId, editor]); // Dependencies: run effect if these change - // --- Render Logic --- // Render Call View if (isCall) { // Initial src is set to about:blank. The useEffect hook will set the actual src later. return ( - + {/* Box grows to fill available space */} -