call view impl

Signed-off-by: Timo K <toger5@hotmail.de>

src/app/components/element-call/CallView.tsx

@@ -69,4 +69,83 @@ export function CallView({
   onJoin = undefined,
   onClose = undefined,
   onHangup = undefined,
-}: IRoomCallViewProps): JSX.Element {}
+}: IRoomCallViewProps): JSX.Element {
+  // Construct required variables
+  const room = useRoom();
+  const client = useMatrixClient();
+  const iframe = useRef<HTMLIFrameElement>(null);
+
+  // Model state
+  const [elementCall, setElementCall] = useState<ElementCall | null>();
+  const [widgetApi, setWidgetApi] = useState<ClientWidgetApi | null>(null);
+  const [state, setState] = useState(State.Preparing);
+
+  // Initialization parameters
+  const isDirect = useIsDirectRoom();
+  const callOngoing = useCallOngoing(room);
+  const initialCallOngoing = React.useRef(callOngoing);
+  const initialIsDirect = React.useRef(isDirect);
+  useEffect(() => {
+    if (client && room && !elementCall) {
+      const e = new ElementCall(client, room, initialIsDirect.current, initialCallOngoing.current);
+      setElementCall(e);
+    }
+  }, [client, room, setElementCall, elementCall]);
+
+  // Start the messaging over the widget api.
+  useEffect(() => {
+    if (iframe.current && elementCall) {
+      elementCall.startMessaging(iframe.current);
+    }
+    return () => {
+      elementCall?.stopMessaging();
+    };
+  }, [iframe, elementCall]);
+
+  // Widget api ready
+  useEventEmitter(elementCall, 'ready', () => {
+    setWidgetApi(elementCall?.widgetApi ?? null);
+    setState(State.Lobby);
+  });
+
+  // Use widget api to listen for hangup/join/close actions
+  useEventEmitter(widgetApi, action(CallWidgetActions.HangupCall), () => {
+    setState(State.HungUp);
+    onHangup?.();
+  });
+  useEventEmitter(widgetApi, action(CallWidgetActions.JoinCall), () => {
+    setState(State.Joined);
+    onJoin?.();
+  });
+  useEventEmitter(widgetApi, action(CallWidgetActions.Close), () => {
+    setState(State.CanClose);
+    onClose?.();
+  });
+
+  // render component
+  return (
+    <div style={containerStyle(state === State.HungUp)}>
+      {/* Exit button for lobby state */}
+      {state === State.Lobby && (
+        <Button
+          variant="Secondary"
+          onClick={() => {
+            setState(State.CanClose);
+            onClose?.();
+          }}
+          style={closeButtonStyle}
+        >
+          <Text size="B400">Close</Text>
+        </Button>
+      )}
+      <iframe
+        ref={iframe}
+        allow={iframeFeatures}
+        sandbox={sandboxFlags}
+        style={iframeStyles}
+        src={elementCall?.embedUrl}
+        title="room call"
+      />
+    </div>
+  );
+}