@loupekit/sdk 0.10.2-next.44 → 0.10.2

package/dist/index.js

@@ -2843,10 +2843,10 @@ var LoupeApp = class {
     if (canShareScreen()) {
       tools.append(inspectBtn, freeBtn, regionBtn, recordBtn);
     } else if (isTouchDevice()) {
-      const videoBtn = this.toolBtn(VIDEO_ICON, "Video", "video");
-      videoBtn.title = "Attach a video \u2014 record your screen with your phone, then pick it here";
-      videoBtn.onclick = () => this.pickVideo();
-      tools.append(inspectBtn, freeBtn, regionBtn, videoBtn);
+      const cameraBtn = this.toolBtn(CAMERA_ICON, "Camera", "camera");
+      cameraBtn.title = "Record a video with the camera and comment";
+      cameraBtn.onclick = () => this.pickCameraVideo();
+      tools.append(inspectBtn, freeBtn, regionBtn, cameraBtn);
     } else {
       tools.append(inspectBtn, freeBtn, regionBtn);
     }
@@ -3025,16 +3025,16 @@ var LoupeApp = class {
     );
   }
   /**
-   * Attach a video on a phone, where the page cannot record the screen: the reporter
-   * records it with the phone's own screen recorder first, then picks the clip here. No
-   * `capture` attribute on purpose — that would force the camera open, and a video of the
-   * room is not a screen recording.
+   * Touch devices with no screen recorder (every iOS browser) can still report a video:
+   * record one with the camera. Opens the native recorder and hands the clip to the
+   * composer exactly like the screen capture does.
    */
-  pickVideo() {
+  pickCameraVideo() {
     this.setMode("off");
     const input = document.createElement("input");
     input.type = "file";
     input.accept = "video/*";
+    input.setAttribute("capture", "environment");
     input.style.display = "none";
     input.onchange = () => {
       const file = input.files?.[0];
@@ -3046,7 +3046,7 @@ var LoupeApp = class {
       const docH = Math.max(1, document.documentElement.scrollHeight);
       const offset = { x: clamp(docX / docW), y: clamp(docY / docH) };
       this.openComposer(
-        { kind: "free", offset, point: { x: docX, y: docY }, label: "Video \xB7 attached" },
+        { kind: "free", offset, point: { x: docX, y: docY }, label: "Camera video \xB7 attached" },
         8,
         window.innerHeight / 2,
         [file]
@@ -3702,7 +3702,7 @@ var I_CLOSE = svg(
 var REGION_ICON = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="1.5" y="2.5" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.4 1.8"/></svg>`;
 var NOTE_ICON = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M2 2.5h11v7.5H6l-3 2.5v-2.5H2z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>`;
 var RECORD_ICON = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="1.5" y="2.5" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.4 1.8"/><circle cx="7.5" cy="7.5" r="2.4" fill="currentColor"/></svg>`;
-var VIDEO_ICON = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="1.5" y="2.5" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M6.3 5.5l3.9 2.2-3.9 2.2z" fill="currentColor"/></svg>`;
+var CAMERA_ICON = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="1.2" y="3.8" width="9.2" height="7.4" rx="1.6" stroke="currentColor" stroke-width="1.3"/><path d="M10.4 7.3l3.4-2v4.4l-3.4-2z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>`;
 var I_GITHUB = `<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 .2a8 8 0 0 0-2.5 15.6c.4.07.55-.17.55-.38v-1.3c-2.2.48-2.67-1.07-2.67-1.07-.36-.92-.88-1.16-.88-1.16-.72-.5.05-.48.05-.48.8.056 1.22.82 1.22.82.71 1.22 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.76-.2-3.6-.88-3.6-3.9 0-.86.3-1.57.82-2.12-.08-.2-.36-1 .08-2.1 0 0 .67-.21 2.2.8a7.6 7.6 0 0 1 4 0c1.53-1.02 2.2-.8 2.2-.8.44 1.1.16 1.9.08 2.1.5.55.82 1.26.82 2.12 0 3.03-1.85 3.7-3.61 3.9.28.24.54.72.54 1.46v2.16c0 .21.14.46.55.38A8 8 0 0 0 8 .2z"/></svg>`;
 var I_SLACK = `<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.4 10.1a1.6 1.6 0 1 1-1.6-1.6h1.6v1.6zm.8 0a1.6 1.6 0 0 1 3.2 0v4a1.6 1.6 0 1 1-3.2 0v-4zM5.8 3.4a1.6 1.6 0 1 1 1.6-1.6v1.6H5.8zm0 .8a1.6 1.6 0 0 1 0 3.2h-4a1.6 1.6 0 1 1 0-3.2h4zm6.7 1.6a1.6 1.6 0 1 1 1.6 1.6h-1.6V5.8zm-.8 0a1.6 1.6 0 0 1-3.2 0v-4a1.6 1.6 0 1 1 3.2 0v4zm-1.6 6.7a1.6 1.6 0 1 1-1.6 1.6v-1.6h1.6zm0-.8a1.6 1.6 0 0 1 0-3.2h4a1.6 1.6 0 1 1 0 3.2h-4z"/></svg>`;
 var I_TELEGRAM = `<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.4-1.24 5.85c-.09.41-.34.51-.69.32l-1.9-1.4-.92.88c-.1.1-.19.19-.38.19l.14-1.93 3.5-3.17c.15-.13-.03-.2-.24-.07l-4.32 2.72-1.86-.58c-.4-.13-.41-.4.09-.6l7.26-2.8c.34-.12.63.08.52.6z"/></svg>`;