fixed shared piano

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

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>
     )

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",

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,
     }
   }