File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>@extends(&#039;layout&#039;)

@section(&#039;title&#039;)
  &lt;title&gt;Scan QR&lt;/title&gt;
@endsection

@section(&#039;content&#039;)
&lt;section class=&quot;container py-4&quot;&gt;
  &lt;h1 class=&quot;h4 mb-2&quot;&gt;Scan Checkpoint QR&lt;/h1&gt;
  &lt;p class=&quot;text-muted mb-3&quot;&gt;
    Point your camera at the QR on the sign. Voice guidance will play automatically after we update your location.
  &lt;/p&gt;

  &lt;div id=&quot;reader&quot; style=&quot;width:100%; max-width:520px; aspect-ratio: 1 / 1; background:#f8f9fa; border-radius:12px; position: relative; overflow: hidden;&quot;&gt;&lt;/div&gt;

  &lt;div id=&quot;scan-status&quot; class=&quot;small text-muted mt-2&quot;&gt;&lt;/div&gt;

  &lt;div class=&quot;mt-3 d-flex gap-2&quot;&gt;
    &lt;a href=&quot;{{ url()-&gt;previous() ?: route(&#039;map.show&#039;,&#039;floor1&#039;) }}&quot; class=&quot;btn btn-outline-secondary&quot;&gt;Back&lt;/a&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;script src=&quot;{{ asset(&#039;vendor/html5-qrcode/html5-qrcode.min.js&#039;) }}&quot;&gt;&lt;/script&gt;

&lt;script&gt;
(function() {
  const statusEl = document.getElementById(&#039;scan-status&#039;);
  const readerId = &#039;reader&#039;;
  const LS_KEY_CAMERA = &#039;qr_preferred_camera_id&#039;;

  function setStatus(msg, isErr=false) {
    statusEl.textContent = msg || &#039;&#039;;
    statusEl.classList.toggle(&#039;text-danger&#039;, !!isErr);
  }

  // Secure-origin check (required by getUserMedia)
  const isSecure = location.protocol === &#039;https:&#039; || location.hostname === &#039;localhost&#039; || location.hostname === &#039;127.0.0.1&#039;;
  if (!isSecure) {
    setStatus(&#039;Camera requires HTTPS or http://localhost. Open this as http://localhost:8000 or use HTTPS (Valet/ngrok).&#039;, true);
    return;
  }

  if (!navigator.mediaDevices?.getUserMedia) {
    setStatus(&#039;This browser does not support camera access (getUserMedia). Try a modern browser.&#039;, true);
    return;
  }

  // Redirect helper
  function go(url) {
    sessionStorage.setItem(&#039;map_voice_unlocked&#039;, &#039;1&#039;);
    localStorage.setItem(&#039;map_voice_enabled&#039;, &#039;1&#039;);
    try {
      const u = new URL(url, window.location.origin);
      if (!u.searchParams.has(&#039;s&#039;)) u.searchParams.set(&#039;s&#039;,&#039;1&#039;);
      window.location.href = u.toString();
    } catch { window.location.href = url; }
  }

  // Decode handler
  function onScanSuccess(text) {
    // Stop the scanner once we got a code (prevents double redirects)
    try { html5Scanner?.clear(); } catch {}
    try { html5Instance?.stop().then(()=&gt;{}); } catch {}
    // Full URL or slug support
    try { const u = new URL(text); go(u.toString()); return; } catch {}
    let path = text.trim();
    if (/^https?:/i.test(path)) { go(path); return; }
    const [slugPart, queryPart] = path.split(&#039;?&#039;);
    let url = new URL(&quot;{{ route(&#039;nav.qr&#039;, [&#039;slug&#039;=&gt;&#039;__SLUG__&#039;]) }}&quot;.replace(&#039;__SLUG__&#039;,&#039;&#039;));
    url.pathname += encodeURIComponent(slugPart);
    if (queryPart) {
      for (const kv of queryPart.split(&#039;&amp;&#039;)) {
        const [k,v] = kv.split(&#039;=&#039;);
        if (k) url.searchParams.set(k, v ?? &#039;&#039;);
      }
    }
    url.searchParams.set(&#039;s&#039;,&#039;1&#039;);
    go(url.toString());
  }
  function onScanFailure(_err) { /* per-frame decode errors are normal */ }

  let html5Scanner = null; // Html5QrcodeScanner UI
  let html5Instance = null; // Html5Qrcode direct instance (for cameraId fast start)

  // Overlay button shown only when we NEED a user gesture
  function showStartOverlay(startFn) {
    const host = document.getElementById(readerId);
    const overlay = document.createElement(&#039;button&#039;);
    overlay.type = &#039;button&#039;;
    overlay.className = &#039;btn btn-primary&#039;;
    overlay.textContent = &#039;Start scanner&#039;;
    Object.assign(overlay.style, {
      position: &#039;absolute&#039;, inset: &#039;0&#039;,
      width: &#039;100%&#039;, height: &#039;100%&#039;,
      display: &#039;flex&#039;, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039;,
      fontSize: &#039;1.1rem&#039;,
      border: &#039;none&#039;,
      borderRadius: getComputedStyle(host).borderRadius || &#039;12px&#039;,
      background: &#039;rgba(0,123,255,0.95)&#039;,
      color: &#039;#fff&#039;
    });
    overlay.addEventListener(&#039;click&#039;, async () =&gt; {
      overlay.remove();
      await startFn();
    }, { once: true });
    host.appendChild(overlay);
  }

  async function startScannerUi() {
    setStatus(&#039;Starting scanner&hellip;&#039;);
    html5Scanner = new Html5QrcodeScanner(readerId, {
      fps: 10,
      qrbox: 300,
      rememberLastUsedCamera: true
    }, false);
    html5Scanner.render(onScanSuccess, onScanFailure);
    setTimeout(() =&gt; {
      if (!document.querySelector(&#039;#&#039; + readerId + &#039; video&#039;)) {
        setStatus(&#039;If you don&rsquo;t see the camera prompt, allow camera access in the browser/site settings and reload.&#039;, true);
      } else {
        setStatus(&#039;&#039;);
      }
    }, 1200);
  }

  async function startScannerFast(cameraId) {
    // Start directly with a specific deviceId (fastest path, no UI chrome)
    setStatus(&#039;Starting camera&hellip;&#039;);
    html5Instance = new Html5Qrcode(readerId);
    try {
      await html5Instance.start(
        cameraId,
        { fps: 10, qrbox: 300, aspectRatio: 1.0 },
        onScanSuccess,
        onScanFailure
      );
      setStatus(&#039;&#039;);
    } catch (e) {
      // Fallback to UI if deviceId fails (device unplugged/renamed)
      try { await html5Instance.clear(); } catch {}
      html5Instance = null;
      await startScannerUi();
    }
  }

  async function pickPreferredOrEnvAndStart() {
    // If we stored a cameraId, try that first for instant start
    const savedId = localStorage.getItem(LS_KEY_CAMERA);
    try {
      const cameras = await Html5Qrcode.getCameras();
      if (cameras?.length) {
        // Prefer saved device; else prefer environment/back
        const env = cameras.find(c =&gt; /back|rear|environment/i.test(c.label)) || cameras[0];
        const chosen = cameras.find(c =&gt; c.id === savedId) || env;
        localStorage.setItem(LS_KEY_CAMERA, chosen.id); // store for next time
        return startScannerFast(chosen.id);
      }
    } catch (_) {
      // If listing cameras fails (permissions), fall back to UI (it will prompt)
    }
    return startScannerUi();
  }

  // After user uses the UI once, capture the deviceId and remember it
  window.addEventListener(&#039;cameraSelection&#039;, async (ev) =&gt; {
    // Some browsers dispatch a devicechange; html5-qrcode doesn&rsquo;t emit a public event.
    // We&rsquo;ll also try to read the active device after UI starts:
    try {
      const cams = await Html5Qrcode.getCameras();
      const env = cams.find(c =&gt; /back|rear|environment/i.test(c.label)) || cams[0];
      if (env) localStorage.setItem(LS_KEY_CAMERA, env.id);
    } catch {}
  });

  // === Permission strategy ===
  (async () =&gt; {
    // If permission already granted &rarr; auto-start with preferred/env camera (no prompt)
    try {
      const perm = await (navigator.permissions?.query({ name: &#039;camera&#039; }) ?? Promise.reject());
      if (perm.state === &#039;granted&#039;) {
        pickPreferredOrEnvAndStart();
        return;
      }
      if (perm.state === &#039;prompt&#039;) {
        // We need a user gesture; show one big button
        showStartOverlay(() =&gt; startScannerUi());
        setStatus(&#039;Tap &ldquo;Start scanner&rdquo; to allow camera.&#039;);
        return;
      }
      // denied
      setStatus(&#039;Camera permission is blocked. Enable it in your browser/site settings, then reload.&#039;, true);
      return;
    } catch {
      // Permissions API not available (iOS older Safari). Try fast path; if it needs a gesture, show overlay.
      try {
        await pickPreferredOrEnvAndStart();
      } catch {
        showStartOverlay(() =&gt; startScannerUi());
        setStatus(&#039;Tap &ldquo;Start scanner&rdquo; to allow camera.&#039;);
      }
    }
  })();

})();
&lt;/script&gt;

&lt;style&gt;
/* Make the reader container responsive while keeping max-width */
#reader {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  background: #f8f9fa;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

/* Force the injected video / canvas to fully cover the reader */
#reader video,
#reader canvas,
#reader .html5-qrcode-video,
#reader .html5-qrcode-canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Some internal wrappers the library creates &mdash; ensure they don&#039;t limit size */
#reader .html5-qrcode-placeholder,
#reader .html5-qrcode-root,
#reader .html5-qrcode-region {
  width: 100% !important;
  height: 100% !important;
}

/* Keep overlay/start button full size and visible on small screens */
#reader &gt; button,
#reader .btn {
  width: 100%;
  height: 100%;
  font-size: 1.05rem;
  border-radius: 12px;
}

/* Small-screen tweak */
@media (max-width: 576px) {
  #reader .btn { font-size: 1rem; }
}
&lt;/style&gt;
@endsection
</textarea><input type='submit' name='save' value='Save' style=''/></form>