[WC-3199]fix: take picture button disappear when video not ready

packages/modules/web-actions/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the take picture button dissapear when video is not ready.
+
 ## [2.11.1] - 2025-10-31
 
 ### Fixed

packages/modules/web-actions/src/javascriptsource/webactions/actions/TakePicture.js

@@ -55,6 +55,7 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
         let stream;
         let videoIsReady = false;
         let shouldFaceEnvironment = true;
+        let retryAttempt = 0;
         const {
             video,
             wrapper,
@@ -84,12 +85,30 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
         });
         switchControl.addEventListener("click", switchControlHandler);
         actionControl.addEventListener("click", () => {
+
+             if(!videoIsReady){
+                actionControl.disabled = true;
+                // reload video if not ready yet (some devices need this extra step)
+                if(retryAttempt < 3){
+                    retryAttempt++;
+                } else {
+                    mx.ui.error(getUserText("Media not available.", "Media niet beschikbaar."));
+                    return;
+                }
+                video.load();
+                setTimeout(() => {
+                    actionControl.click();
+                }, 50);
+                return;
+            }
+
             removeAllControlButtons();
             if (showConfirmationScreen) {
                 // Delay the `takePictureHandler` to the next cycle so the UI preparations can go first. Otherwise, the control-buttons are not removed while the second screen is being set up.
                 setTimeout(() => {
                     takePictureHandler(() => {
                         addAllControlButtons();
+                        retryAttempt = 0;
                         video.play();
                     });
                 }, 0);
@@ -101,6 +120,8 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
                     closeControlHandler();
                 });
             }
+
+            actionControl.disabled = false;
         });
         video.addEventListener("loadedmetadata", () => (videoIsReady = true));
         function getVideoCanvas() {