Merge pull request #49 from DSD-DBS/fix-focus

fix: Make sure users focus Capella

frontend/src/components/focus-iframe.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useRef, useState } from "react";
+
+const FocusIframe = ({ src }: { src: string }) => {
+  const [focused, setFocused] = useState(true);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    setInterval(() => {
+      if (document.activeElement === iframeRef.current) {
+        setFocused(true);
+      } else {
+        setFocused(false);
+      }
+    }, 300);
+  }, []);
+
+  function setFocus() {
+    iframeRef.current?.focus();
+  }
+
+  return (
+    <div className="relative h-full w-full">
+      {!focused && (
+        <div
+          className="absolute inset-0 flex items-center justify-center bg-black/50"
+          onClick={setFocus}
+        >
+          <div className="text-2xl text-white">Click to focus</div>
+        </div>
+      )}
+      <iframe
+        src={src}
+        ref={iframeRef}
+        allow="clipboard-read; clipboard-write"
+        className="h-full w-full border-0"
+      ></iframe>
+    </div>
+  );
+};
+
+export default FocusIframe;

frontend/src/routes/lesson.tsx

@@ -16,6 +16,7 @@ import { $api } from "@/lib/api/client.ts";
 import { ImperativePanelHandle } from "react-resizable-panels";
 import { ENABLE_BUILT_IN_CAPELLA, SESSION_ID } from "@/lib/const.ts";
 import { useQueryClient } from "@tanstack/react-query";
+import FocusIframe from "@/components/focus-iframe.tsx";
 
 const StaticLesson = ({
   shouldBeMaximized,
@@ -80,10 +81,7 @@ const ResizeableLesson = ({
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel collapsible ref={capellaRef}>
-        <iframe
-          src="http://localhost:8088/"
-          className="h-full w-full border-0"
-        ></iframe>
+        <FocusIframe src="http://localhost:8088/" />
       </ResizablePanel>
     </ResizablePanelGroup>
   );