From 8fa8c388d95bae8d6e0138f58a9217c9193f52ab Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Thu, 4 Sep 2025 17:54:39 +0200
Subject: [PATCH] fixed shared piano

---
 index.html                            |  1 +
 src/shapes/SharedPianoShapeUtil.tsx   | 26 ++++++++++++++++++--------
 src/shapes/VideoChatShapeUtil.tsx     |  6 +++---
 worker/shapes/SharedPianoShapeUtil.ts | 11 +++++++----
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index a3ec45f..c82e56d 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
 	<title>Jeff Emmett</title>
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="Permissions-Policy" content="midi=*, microphone=*, camera=*, autoplay=*">
 	<link rel="preconnect" href="https://fonts.googleapis.com" />
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 	<link
diff --git a/src/shapes/SharedPianoShapeUtil.tsx b/src/shapes/SharedPianoShapeUtil.tsx
index 91bfa47..3371215 100644
--- a/src/shapes/SharedPianoShapeUtil.tsx
+++ b/src/shapes/SharedPianoShapeUtil.tsx
@@ -53,7 +53,7 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
 
     const handleIframeError = useCallback(() => {
       setIsLoading(false)
-      setError("Failed to load Shared Piano")
+      setError("Failed to load Shared Piano. Please check your browser permissions for MIDI and audio access.")
     }, [])
 
     const handleToggleMinimize = (e: React.MouseEvent) => {
@@ -74,9 +74,10 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
           position: "absolute",
           top: 8,
           right: 8,
-          zIndex: 1000,
+          zIndex: 10,
           display: "flex",
           gap: 4,
+          pointerEvents: "auto",
         }}
       >
         <button
@@ -108,6 +109,8 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
           borderRadius: "8px",
           border: "1px solid var(--color-panel)",
           backgroundColor: "var(--color-background)",
+          zIndex: 1,
+          pointerEvents: "auto",
         }}
       >
         {controls}
@@ -129,7 +132,7 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
             🎹 Shared Piano
           </div>
         ) : (
-          <>
+          <div style={{ position: "relative", width: "100%", height: "100%", zIndex: 1 }}>
             {isLoading && (
               <div
                 style={{
@@ -142,7 +145,8 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
                   alignItems: "center",
                   justifyContent: "center",
                   background: "var(--color-background)",
-                  zIndex: 1,
+                  zIndex: 3,
+                  pointerEvents: "auto",
                 }}
               >
                 <div style={{ textAlign: "center" }}>
@@ -164,7 +168,8 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
                   alignItems: "center",
                   justifyContent: "center",
                   background: "var(--color-background)",
-                  zIndex: 1,
+                  zIndex: 3,
+                  pointerEvents: "auto",
                 }}
               >
                 <div style={{ textAlign: "center", color: "var(--color-text)" }}>
@@ -206,14 +211,19 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
                 borderRadius: "8px",
                 opacity: isLoading ? 0 : 1,
                 transition: "opacity 0.3s ease",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                zIndex: 2,
+                pointerEvents: "auto",
               }}
               onLoad={handleIframeLoad}
               onError={handleIframeError}
               title="Chrome Music Lab Shared Piano"
-              allow="microphone; camera"
-              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+              allow="microphone; camera; midi; autoplay; encrypted-media; fullscreen"
+              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals"
             />
-          </>
+          </div>
         )}
       </div>
     )
diff --git a/src/shapes/VideoChatShapeUtil.tsx b/src/shapes/VideoChatShapeUtil.tsx
index 7a49f54..89012ce 100644
--- a/src/shapes/VideoChatShapeUtil.tsx
+++ b/src/shapes/VideoChatShapeUtil.tsx
@@ -395,7 +395,7 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
     console.log('📝 addTranscriptionMessage called');
     console.log('Sender:', sender);
     console.log('Message:', message);
-    console.log('Current transcription history length:', shape.props.transcriptionHistory.length);
+    console.log('Current transcription history length:', shape.props.transcriptionHistory?.length || 0);
     
     const newMessage = {
       sender,
@@ -410,7 +410,7 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
       type: shape.type,
       props: {
         ...shape.props,
-        transcriptionHistory: [...shape.props.transcriptionHistory, newMessage]
+        transcriptionHistory: [...(shape.props.transcriptionHistory || []), newMessage]
       }
     });
     
@@ -645,7 +645,7 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
         )}
 
         {/* Transcription History */}
-        {shape.props.transcriptionHistory.length > 0 && (
+        {shape.props.transcriptionHistory && shape.props.transcriptionHistory.length > 0 && (
           <div
             style={{
               position: "absolute",
diff --git a/worker/shapes/SharedPianoShapeUtil.ts b/worker/shapes/SharedPianoShapeUtil.ts
index 1f6ee2b..91306f0 100644
--- a/worker/shapes/SharedPianoShapeUtil.ts
+++ b/worker/shapes/SharedPianoShapeUtil.ts
@@ -5,7 +5,10 @@ export type ISharedPianoShape = TLBaseShape<
   {
     w: number
     h: number
-    isPlaying: boolean
+    isMinimized?: boolean
+    interactionState?: {
+      scrollPosition?: { x: number; y: number }
+    }
   }
 >
 
@@ -14,9 +17,9 @@ export class SharedPianoShape extends BaseBoxShapeUtil<ISharedPianoShape> {
 
   getDefaultProps(): ISharedPianoShape["props"] {
     return {
-      w: 400,
-      h: 200,
-      isPlaying: false,
+      w: 800,
+      h: 600,
+      isMinimized: false,
     }
   }