@limrun/ui 0.13.6 → 0.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limrun/ui",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "publishConfig": {
     "access": "public"
   },

package/src/components/remote-control.tsx

@@ -345,6 +345,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     const videoRef = useRef<HTMLVideoElement>(null);
     const frameRef = useRef<HTMLImageElement>(null);
     const [videoLoaded, setVideoLoaded] = useState(false);
+    const [unmuted, setUnmuted] = useState(false);
     const [retryExhausted, setRetryExhausted] = useState(false);
     const [isLandscape, setIsLandscape] = useState(false);
     const [useAndroidTabletFrame, setUseAndroidTabletFrame] = useState(false);
@@ -477,11 +478,33 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     const platform = useMemo(() => detectPlatform(url), [url]);
     const config = deviceConfig[platform];
 
+    useEffect(() => {
+      setUnmuted(false);
+      if (videoRef.current) {
+        videoRef.current.muted = true;
+      }
+    }, [platform, url]);
+
     const updateStatus = (message: string) => {
       // Use the wrapper for conditional logging
       debugLog(message);
     };
 
+    const unmute = () => {
+      if (unmuted) {
+        return;
+      }
+
+      setUnmuted(true);
+      const video = videoRef.current;
+      if (video) {
+        video.muted = false;
+        video.play().catch((err: unknown) => {
+          debugWarn('Unable to unmute after user interaction:', err);
+        });
+      }
+    };
+
     const sendBinaryControlMessage = (data: ArrayBuffer) => {
       if (!dataChannelRef.current || dataChannelRef.current.readyState !== 'open') {
         return;
@@ -964,6 +987,10 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       event.preventDefault();
       event.stopPropagation();
 
+      if (event.type === 'mousedown' || event.type === 'touchstart') {
+        unmute();
+      }
+
       // Compute mapping context once per event (reused for all pointers)
       const ctx = computeVideoMappingContext();
 
@@ -2505,7 +2532,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           }}
           autoPlay
           playsInline
-          muted
+          muted={!unmuted}
           tabIndex={0}
           onKeyDown={handleKeyboard}
           onKeyUp={handleKeyboard}