@mhmo91/schmancy 0.9.20 → 0.9.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/agent/{flow-3RrZM-e7.js.map → flow-CvG1fLW5.js.map} +1 -1
- package/dist/agent/schmancy.agent.js +2172 -2168
- package/dist/agent/schmancy.agent.js.map +1 -1
- package/dist/agent/{vendor-highlight-BmnMldIa.js.map → vendor-highlight-Dow87ZL_.js.map} +1 -1
- package/dist/agent/{vendor-jsqr-1wQ5xc49.js.map → vendor-jsqr-Bl4iAtKC.js.map} +1 -1
- package/dist/agent/{vendor-material-color-33Mj762T.js.map → vendor-material-color-DcL7ZPxx.js.map} +1 -1
- package/dist/handover/agent-runtime-followups.md +1 -1
- package/dist/handover/agent-runtime-v1.md +3 -3
- package/dist/qr-scanner.cjs +5 -5
- package/dist/qr-scanner.cjs.map +1 -1
- package/dist/qr-scanner.js +10 -6
- package/dist/qr-scanner.js.map +1 -1
- package/package.json +1 -1
- package/src/qr-scanner/qr-scanner.ts +27 -2
- /package/dist/agent/{flow-3RrZM-e7.js → flow-CvG1fLW5.js} +0 -0
- /package/dist/agent/{vendor-highlight-BmnMldIa.js → vendor-highlight-Dow87ZL_.js} +0 -0
- /package/dist/agent/{vendor-jsqr-1wQ5xc49.js → vendor-jsqr-Bl4iAtKC.js} +0 -0
- /package/dist/agent/{vendor-material-color-33Mj762T.js → vendor-material-color-DcL7ZPxx.js} +0 -0
|
@@ -203,7 +203,7 @@ The manifest already has everything needed; the package is just the JSON-RPC wra
|
|
|
203
203
|
|
|
204
204
|
**Problem.** `handover/agent-runtime-v1.md` had `<PENDING>` placeholders that we manually replaced with `0.9.13` after the first publish. Future handover docs will have the same issue.
|
|
205
205
|
|
|
206
|
-
**Fix.** A build step that substitutes `0.9.
|
|
206
|
+
**Fix.** A build step that substitutes `0.9.21` in `handover/**/*.md` against `package.json`'s `version` field on every build. `dist/handover/**/*.md` gets the rendered version; the source stays templated.
|
|
207
207
|
|
|
208
208
|
**Effort:** ~30 min (one sed step or a tiny script).
|
|
209
209
|
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
## The URLs you asked for
|
|
8
8
|
|
|
9
9
|
```
|
|
10
|
-
https://esm.sh/@mhmo91/schmancy/agent@0.9.
|
|
11
|
-
https://esm.sh/@mhmo91/schmancy/agent/manifest@0.9.
|
|
10
|
+
https://esm.sh/@mhmo91/schmancy/agent@0.9.21
|
|
11
|
+
https://esm.sh/@mhmo91/schmancy/agent/manifest@0.9.21
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
`0.9.13` is the first release containing `/agent`; every subsequent publish serves the same subpath. `npm view @mhmo91/schmancy version` always returns the current pin if you want to float forward.
|
|
@@ -20,7 +20,7 @@ One script tag. No bundler, no bare specifiers, no npm install.
|
|
|
20
20
|
```html
|
|
21
21
|
<!doctype html>
|
|
22
22
|
<script type="module">
|
|
23
|
-
import { $dialog, theme } from 'https://esm.sh/@mhmo91/schmancy/agent@0.9.
|
|
23
|
+
import { $dialog, theme } from 'https://esm.sh/@mhmo91/schmancy/agent@0.9.21';
|
|
24
24
|
</script>
|
|
25
25
|
<schmancy-theme root scheme="dark">
|
|
26
26
|
<schmancy-surface type="solid" fill="all">
|
package/dist/qr-scanner.cjs
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`})
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./decorate-F9CuyeHg.cjs`),t=require(`./litElement.mixin-CtQOmwq6.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/when.js`);var s=null,c=null,l=class extends t.t(a.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
width: 100%;
|
|
5
5
|
height: 100%;
|
|
6
6
|
min-height: 300px;
|
|
7
7
|
}
|
|
8
|
-
`){constructor(...e){super(...e),this.continuous=!0,this.hasPermission=!1,this.error=``,this.showSuccess=!1,this.stream=null,this.destroy$=new
|
|
8
|
+
`){constructor(...e){super(...e),this.continuous=!0,this.hasPermission=!1,this.error=``,this.showSuccess=!1,this.stream=null,this.destroy$=new n.Subject,this.videoElement=null}connectedCallback(){super.connectedCallback(),this.startCamera()}async startCamera(){try{let e={video:{facingMode:`environment`,width:{ideal:1280},height:{ideal:720}}};if(this.stream=await navigator.mediaDevices.getUserMedia(e),this.hasPermission=!0,this.error=``,await this.updateComplete,this.videoElement=this.shadowRoot?.querySelector(`#video`),this.videoElement){if(this.videoElement.srcObject=this.stream,await this.videoElement.play(),await(c||=import(`jsqr`).then(e=>(s=e.default,e.default))),!this.isConnected)return;this.startScanning()}}catch{this.hasPermission=!1,this.error=`Camera access is required to scan QR codes. Please allow camera access and try again.`}}stopCamera(){this.destroy$.next(),this.stream&&=(this.stream.getTracks().forEach(e=>e.stop()),null),this.videoElement&&=(this.videoElement.srcObject=null,null),this.hasPermission=!1,this.error=``,this.showSuccess=!1}startScanning(){this.videoElement&&this.hasPermission&&(0,n.animationFrames)().pipe((0,r.map)(()=>this.scanFrame()),(0,r.filter)(e=>e!==null),(0,r.distinctUntilChanged)((e,t)=>e.data===t.data&&t.timestamp-e.timestamp<2e3),(0,r.throttleTime)(500),(0,r.takeUntil)(this.destroy$)).subscribe({next:e=>this.handleScanResult(e),error:e=>{}})}scanFrame(){if(!this.videoElement||this.videoElement.readyState!==HTMLMediaElement.HAVE_ENOUGH_DATA)return null;try{let e=document.createElement(`canvas`);e.width=this.videoElement.videoWidth,e.height=this.videoElement.videoHeight;let t=e.getContext(`2d`);if(!t)return null;t.drawImage(this.videoElement,0,0);let n=t.getImageData(0,0,e.width,e.height);if(!s)return null;let r=s(n.data,n.width,n.height);if(r&&r.data)return{data:r.data,timestamp:Date.now()}}catch{}return null}handleScanResult(e){this.showSuccessFlash(),navigator.vibrate&&navigator.vibrate([100,50,100]),this.playSuccessSound(),this.dispatchEvent(new CustomEvent(`scan-result`,{detail:{data:e.data,timestamp:e.timestamp},bubbles:!0,composed:!0}))}showSuccessFlash(){this.showSuccess=!0,(0,n.timer)(500).pipe((0,r.takeUntil)(this.destroy$)).subscribe(()=>{this.showSuccess=!1})}playSuccessSound(){try{let e=new(window.AudioContext||window.webkitAudioContext),t=e.createOscillator(),n=e.createGain();t.connect(n),n.connect(e.destination),t.frequency.setValueAtTime(800,e.currentTime),t.frequency.setValueAtTime(1e3,e.currentTime+.1),n.gain.setValueAtTime(.3,e.currentTime),n.gain.exponentialRampToValueAtTime(.01,e.currentTime+.2),t.start(e.currentTime),t.stop(e.currentTime+.2)}catch{}}disconnectedCallback(){super.disconnectedCallback(),this.stopCamera(),this.destroy$.complete()}render(){return this.error?a.html`
|
|
9
9
|
<div class="w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5">
|
|
10
10
|
<schmancy-icon size="64" class="mb-4">camera_alt</schmancy-icon>
|
|
11
11
|
<schmancy-typography type="headline" token="md" class="mb-4">Camera Permission Required</schmancy-typography>
|
|
12
12
|
<schmancy-typography type="body" token="md" class="mb-6 max-w-sm">${this.error}</schmancy-typography>
|
|
13
13
|
<schmancy-button variant="filled" @click=${()=>window.location.reload()}>Retry</schmancy-button>
|
|
14
14
|
</div>
|
|
15
|
-
`:
|
|
15
|
+
`:a.html`
|
|
16
16
|
<div class="relative w-full h-full bg-black overflow-hidden rounded-xl">
|
|
17
17
|
<!-- Video Stream -->
|
|
18
18
|
<video id="video" class="absolute inset-0 w-full h-full object-cover" autoplay muted playsinline></video>
|
|
19
19
|
|
|
20
20
|
<!-- Success Flash -->
|
|
21
|
-
${(0,
|
|
21
|
+
${(0,o.when)(this.showSuccess,()=>a.html`<div class="absolute inset-0 bg-green-400/30 pointer-events-none"></div>`)}
|
|
22
22
|
|
|
23
23
|
<!-- Minimal corner brackets - Apple style -->
|
|
24
24
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse">
|
|
@@ -32,4 +32,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
|
|
|
32
32
|
<div class="absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl"></div>
|
|
33
33
|
</div>
|
|
34
34
|
</div>
|
|
35
|
-
`}};
|
|
35
|
+
`}};e.t([(0,i.property)({type:Boolean})],l.prototype,`continuous`,void 0),e.t([(0,i.state)()],l.prototype,`hasPermission`,void 0),e.t([(0,i.state)()],l.prototype,`error`,void 0),e.t([(0,i.state)()],l.prototype,`showSuccess`,void 0),l=e.t([(0,i.customElement)(`schmancy-qr-scanner`)],l),Object.defineProperty(exports,`SchmancyQRScanner`,{enumerable:!0,get:function(){return l}});
|
package/dist/qr-scanner.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qr-scanner.cjs","names":[],"sources":["../src/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { $LitElement } from '@mixins/litElement.mixin'\nimport jsQR from 'jsqr'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { animationFrames, Subject, timer } from 'rxjs'\nimport { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'\n\ninterface QRScanResult {\n\tdata: string\n\ttimestamp: number\n}\n\n@customElement('schmancy-qr-scanner')\nexport class SchmancyQRScanner extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: 300px;\n\t}\n`) {\n\t@property({ type: Boolean }) continuous = true\n\n\t@state() private hasPermission = false\n\t@state() private error = ''\n\t@state() private showSuccess = false\n\n\tprivate stream: MediaStream | null = null\n\tprivate destroy$ = new Subject<void>()\n\tprivate videoElement: HTMLVideoElement | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.startCamera()\n\t}\n\n\tprivate async startCamera(): Promise<void> {\n\t\ttry {\n\t\t\tconst constraints: MediaStreamConstraints = {\n\t\t\t\tvideo: {\n\t\t\t\t\tfacingMode: 'environment',\n\t\t\t\t\twidth: { ideal: 1280 },\n\t\t\t\t\theight: { ideal: 720 },\n\t\t\t\t},\n\t\t\t}\n\n\t\t\tthis.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\t\t\tthis.hasPermission = true\n\t\t\tthis.error = ''\n\n\t\t\tawait this.updateComplete\n\n\t\t\tthis.videoElement = this.shadowRoot?.querySelector('#video') as HTMLVideoElement\n\t\t\tif (this.videoElement) {\n\t\t\t\tthis.videoElement.srcObject = this.stream\n\t\t\t\tawait this.videoElement.play()\n\t\t\t\tthis.startScanning()\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Camera access denied:', error)\n\t\t\tthis.hasPermission = false\n\t\t\tthis.error = 'Camera access is required to scan QR codes. Please allow camera access and try again.'\n\t\t}\n\t}\n\n\tprivate stopCamera(): void {\n\t\tthis.destroy$.next()\n\n\t\tif (this.stream) {\n\t\t\tthis.stream.getTracks().forEach(track => track.stop())\n\t\t\tthis.stream = null\n\t\t}\n\n\t\tif (this.videoElement) {\n\t\t\tthis.videoElement.srcObject = null\n\t\t\tthis.videoElement = null\n\t\t}\n\n\t\tthis.hasPermission = false\n\t\tthis.error = ''\n\t\tthis.showSuccess = false\n\t}\n\n\tprivate startScanning(): void {\n\t\tif (!this.videoElement || !this.hasPermission) {\n\t\t\treturn\n\t\t}\n\n\t\tanimationFrames()\n\t\t\t.pipe(\n\t\t\t\tmap(() => this.scanFrame()),\n\t\t\t\tfilter((result): result is QRScanResult => result !== null),\n\t\t\t\tdistinctUntilChanged((prev, curr) => {\n\t\t\t\t\tif (prev.data !== curr.data) return false\n\t\t\t\t\treturn curr.timestamp - prev.timestamp < 2000\n\t\t\t\t}),\n\t\t\t\tthrottleTime(500),\n\t\t\t\ttakeUntil(this.destroy$),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: result => this.handleScanResult(result),\n\t\t\t\terror: error => {\n\t\t\t\t\tconsole.error('Scanning error:', error)\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tprivate scanFrame(): QRScanResult | null {\n\t\tif (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) {\n\t\t\treturn null\n\t\t}\n\n\t\ttry {\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = this.videoElement.videoWidth\n\t\t\tcanvas.height = this.videoElement.videoHeight\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return null\n\n\t\t\tctx.drawImage(this.videoElement, 0, 0)\n\t\t\tconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n\t\t\tconst code = jsQR(imageData.data, imageData.width, imageData.height)\n\n\t\t\tif (code && code.data) {\n\t\t\t\treturn {\n\t\t\t\t\tdata: code.data,\n\t\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Frame scan error:', error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\tprivate handleScanResult(result: QRScanResult): void {\n\t\tthis.showSuccessFlash()\n\n\t\t// Haptic feedback if available\n\t\tif (navigator.vibrate) {\n\t\t\tnavigator.vibrate([100, 50, 100])\n\t\t}\n\n\t\t// Audio feedback\n\t\tthis.playSuccessSound()\n\n\t\t// Dispatch scan result\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('scan-result', {\n\t\t\t\tdetail: { data: result.data, timestamp: result.timestamp },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t}\n\n\tprivate showSuccessFlash(): void {\n\t\tthis.showSuccess = true\n\t\ttimer(500)\n\t\t\t.pipe(takeUntil(this.destroy$))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showSuccess = false\n\t\t\t})\n\t}\n\n\tprivate playSuccessSound(): void {\n\t\ttry {\n\t\t\tconst AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext\n\t\t\tconst audioContext = new AudioContextClass()\n\t\t\tconst oscillator = audioContext.createOscillator()\n\t\t\tconst gainNode = audioContext.createGain()\n\n\t\t\toscillator.connect(gainNode)\n\t\t\tgainNode.connect(audioContext.destination)\n\n\t\t\toscillator.frequency.setValueAtTime(800, audioContext.currentTime)\n\t\t\toscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1)\n\n\t\t\tgainNode.gain.setValueAtTime(0.3, audioContext.currentTime)\n\t\t\tgainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)\n\n\t\t\toscillator.start(audioContext.currentTime)\n\t\t\toscillator.stop(audioContext.currentTime + 0.2)\n\t\t} catch {\n\t\t\t// Audio feedback failed silently\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.stopCamera()\n\t\tthis.destroy$.complete()\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5\">\n\t\t\t\t\t<schmancy-icon size=\"64\" class=\"mb-4\">camera_alt</schmancy-icon>\n\t\t\t\t\t<schmancy-typography type=\"headline\" token=\"md\" class=\"mb-4\">Camera Permission Required</schmancy-typography>\n\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\" class=\"mb-6 max-w-sm\">${this.error}</schmancy-typography>\n\t\t\t\t\t<schmancy-button variant=\"filled\" @click=${() => window.location.reload()}>Retry</schmancy-button>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"relative w-full h-full bg-black overflow-hidden rounded-xl\">\n\t\t\t\t<!-- Video Stream -->\n\t\t\t\t<video id=\"video\" class=\"absolute inset-0 w-full h-full object-cover\" autoplay muted playsinline></video>\n\n\t\t\t\t<!-- Success Flash -->\n\t\t\t\t${when(this.showSuccess, () => html`<div class=\"absolute inset-0 bg-green-400/30 pointer-events-none\"></div>`)}\n\n\t\t\t\t<!-- Minimal corner brackets - Apple style -->\n\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse\">\n\t\t\t\t\t<!-- Top-left corner -->\n\t\t\t\t\t<div class=\"absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl\"></div>\n\t\t\t\t\t<!-- Top-right corner -->\n\t\t\t\t\t<div class=\"absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-left corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-right corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-qr-scanner': SchmancyQRScanner\n\t}\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qr-scanner.cjs","names":[],"sources":["../src/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { animationFrames, Subject, timer } from 'rxjs'\nimport { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'\n\n// jsQR (~53 KB gzipped) is loaded lazily the first time a camera stream\n// is attached — see ADR 0014. Until this resolves, scanFrame() returns\n// null and no decode happens, so the animationFrames loop spins harmlessly.\ntype JsQR = typeof import('jsqr').default\nlet jsQRFn: JsQR | null = null\nlet jsQRPromise: Promise<JsQR> | null = null\nfunction loadJsQR(): Promise<JsQR> {\n\tif (jsQRPromise) return jsQRPromise\n\tjsQRPromise = import('jsqr').then(m => {\n\t\tjsQRFn = m.default\n\t\treturn m.default\n\t})\n\treturn jsQRPromise\n}\n\ninterface QRScanResult {\n\tdata: string\n\ttimestamp: number\n}\n\n@customElement('schmancy-qr-scanner')\nexport class SchmancyQRScanner extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: 300px;\n\t}\n`) {\n\t@property({ type: Boolean }) continuous = true\n\n\t@state() private hasPermission = false\n\t@state() private error = ''\n\t@state() private showSuccess = false\n\n\tprivate stream: MediaStream | null = null\n\tprivate destroy$ = new Subject<void>()\n\tprivate videoElement: HTMLVideoElement | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.startCamera()\n\t}\n\n\tprivate async startCamera(): Promise<void> {\n\t\ttry {\n\t\t\tconst constraints: MediaStreamConstraints = {\n\t\t\t\tvideo: {\n\t\t\t\t\tfacingMode: 'environment',\n\t\t\t\t\twidth: { ideal: 1280 },\n\t\t\t\t\theight: { ideal: 720 },\n\t\t\t\t},\n\t\t\t}\n\n\t\t\tthis.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\t\t\tthis.hasPermission = true\n\t\t\tthis.error = ''\n\n\t\t\tawait this.updateComplete\n\n\t\t\tthis.videoElement = this.shadowRoot?.querySelector('#video') as HTMLVideoElement\n\t\t\tif (this.videoElement) {\n\t\t\t\tthis.videoElement.srcObject = this.stream\n\t\t\t\tawait this.videoElement.play()\n\t\t\t\t// Preload jsQR before starting the animationFrames loop so the\n\t\t\t\t// first few frames have the decoder available. If the fetch\n\t\t\t\t// hasn't finished by the time a frame fires, scanFrame() just\n\t\t\t\t// returns null for that tick — no decode, no error.\n\t\t\t\tawait loadJsQR()\n\t\t\t\tif (!this.isConnected) return\n\t\t\t\tthis.startScanning()\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Camera access denied:', error)\n\t\t\tthis.hasPermission = false\n\t\t\tthis.error = 'Camera access is required to scan QR codes. Please allow camera access and try again.'\n\t\t}\n\t}\n\n\tprivate stopCamera(): void {\n\t\tthis.destroy$.next()\n\n\t\tif (this.stream) {\n\t\t\tthis.stream.getTracks().forEach(track => track.stop())\n\t\t\tthis.stream = null\n\t\t}\n\n\t\tif (this.videoElement) {\n\t\t\tthis.videoElement.srcObject = null\n\t\t\tthis.videoElement = null\n\t\t}\n\n\t\tthis.hasPermission = false\n\t\tthis.error = ''\n\t\tthis.showSuccess = false\n\t}\n\n\tprivate startScanning(): void {\n\t\tif (!this.videoElement || !this.hasPermission) {\n\t\t\treturn\n\t\t}\n\n\t\tanimationFrames()\n\t\t\t.pipe(\n\t\t\t\tmap(() => this.scanFrame()),\n\t\t\t\tfilter((result): result is QRScanResult => result !== null),\n\t\t\t\tdistinctUntilChanged((prev, curr) => {\n\t\t\t\t\tif (prev.data !== curr.data) return false\n\t\t\t\t\treturn curr.timestamp - prev.timestamp < 2000\n\t\t\t\t}),\n\t\t\t\tthrottleTime(500),\n\t\t\t\ttakeUntil(this.destroy$),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: result => this.handleScanResult(result),\n\t\t\t\terror: error => {\n\t\t\t\t\tconsole.error('Scanning error:', error)\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tprivate scanFrame(): QRScanResult | null {\n\t\tif (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) {\n\t\t\treturn null\n\t\t}\n\n\t\ttry {\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = this.videoElement.videoWidth\n\t\t\tcanvas.height = this.videoElement.videoHeight\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return null\n\n\t\t\tctx.drawImage(this.videoElement, 0, 0)\n\t\t\tconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n\t\t\t// Skip this frame if jsQR hasn't resolved yet — startCamera awaits\n\t\t\t// loadJsQR() before this path runs, so in practice jsQRFn is\n\t\t\t// always set here. Keeping the guard for safety during racy\n\t\t\t// disconnects.\n\t\t\tif (!jsQRFn) return null\n\t\t\tconst code = jsQRFn(imageData.data, imageData.width, imageData.height)\n\n\t\t\tif (code && code.data) {\n\t\t\t\treturn {\n\t\t\t\t\tdata: code.data,\n\t\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Frame scan error:', error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\tprivate handleScanResult(result: QRScanResult): void {\n\t\tthis.showSuccessFlash()\n\n\t\t// Haptic feedback if available\n\t\tif (navigator.vibrate) {\n\t\t\tnavigator.vibrate([100, 50, 100])\n\t\t}\n\n\t\t// Audio feedback\n\t\tthis.playSuccessSound()\n\n\t\t// Dispatch scan result\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('scan-result', {\n\t\t\t\tdetail: { data: result.data, timestamp: result.timestamp },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t}\n\n\tprivate showSuccessFlash(): void {\n\t\tthis.showSuccess = true\n\t\ttimer(500)\n\t\t\t.pipe(takeUntil(this.destroy$))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showSuccess = false\n\t\t\t})\n\t}\n\n\tprivate playSuccessSound(): void {\n\t\ttry {\n\t\t\tconst AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext\n\t\t\tconst audioContext = new AudioContextClass()\n\t\t\tconst oscillator = audioContext.createOscillator()\n\t\t\tconst gainNode = audioContext.createGain()\n\n\t\t\toscillator.connect(gainNode)\n\t\t\tgainNode.connect(audioContext.destination)\n\n\t\t\toscillator.frequency.setValueAtTime(800, audioContext.currentTime)\n\t\t\toscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1)\n\n\t\t\tgainNode.gain.setValueAtTime(0.3, audioContext.currentTime)\n\t\t\tgainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)\n\n\t\t\toscillator.start(audioContext.currentTime)\n\t\t\toscillator.stop(audioContext.currentTime + 0.2)\n\t\t} catch {\n\t\t\t// Audio feedback failed silently\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.stopCamera()\n\t\tthis.destroy$.complete()\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5\">\n\t\t\t\t\t<schmancy-icon size=\"64\" class=\"mb-4\">camera_alt</schmancy-icon>\n\t\t\t\t\t<schmancy-typography type=\"headline\" token=\"md\" class=\"mb-4\">Camera Permission Required</schmancy-typography>\n\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\" class=\"mb-6 max-w-sm\">${this.error}</schmancy-typography>\n\t\t\t\t\t<schmancy-button variant=\"filled\" @click=${() => window.location.reload()}>Retry</schmancy-button>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"relative w-full h-full bg-black overflow-hidden rounded-xl\">\n\t\t\t\t<!-- Video Stream -->\n\t\t\t\t<video id=\"video\" class=\"absolute inset-0 w-full h-full object-cover\" autoplay muted playsinline></video>\n\n\t\t\t\t<!-- Success Flash -->\n\t\t\t\t${when(this.showSuccess, () => html`<div class=\"absolute inset-0 bg-green-400/30 pointer-events-none\"></div>`)}\n\n\t\t\t\t<!-- Minimal corner brackets - Apple style -->\n\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse\">\n\t\t\t\t\t<!-- Top-left corner -->\n\t\t\t\t\t<div class=\"absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl\"></div>\n\t\t\t\t\t<!-- Top-right corner -->\n\t\t\t\t\t<div class=\"absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-left corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-right corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-qr-scanner': SchmancyQRScanner\n\t}\n}\n"],"mappings":"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"}
|
package/dist/qr-scanner.js
CHANGED
|
@@ -5,8 +5,7 @@ import { distinctUntilChanged as a, filter as o, map as s, takeUntil as c, throt
|
|
|
5
5
|
import { customElement as u, property as d, state as f } from "lit/decorators.js";
|
|
6
6
|
import { css as p, html as m } from "lit";
|
|
7
7
|
import { when as h } from "lit/directives/when.js";
|
|
8
|
-
|
|
9
|
-
var _ = class extends t(p`
|
|
8
|
+
var g = null, _ = null, v = class extends t(p`
|
|
10
9
|
:host {
|
|
11
10
|
display: block;
|
|
12
11
|
width: 100%;
|
|
@@ -27,7 +26,10 @@ var _ = class extends t(p`
|
|
|
27
26
|
width: { ideal: 1280 },
|
|
28
27
|
height: { ideal: 720 }
|
|
29
28
|
} };
|
|
30
|
-
this.stream = await navigator.mediaDevices.getUserMedia(e), this.hasPermission = !0, this.error = "", await this.updateComplete, this.videoElement = this.shadowRoot?.querySelector("#video"), this.videoElement
|
|
29
|
+
if (this.stream = await navigator.mediaDevices.getUserMedia(e), this.hasPermission = !0, this.error = "", await this.updateComplete, this.videoElement = this.shadowRoot?.querySelector("#video"), this.videoElement) {
|
|
30
|
+
if (this.videoElement.srcObject = this.stream, await this.videoElement.play(), await (_ ||= import("jsqr").then((e) => (g = e.default, e.default))), !this.isConnected) return;
|
|
31
|
+
this.startScanning();
|
|
32
|
+
}
|
|
31
33
|
} catch {
|
|
32
34
|
this.hasPermission = !1, this.error = "Camera access is required to scan QR codes. Please allow camera access and try again.";
|
|
33
35
|
}
|
|
@@ -49,7 +51,9 @@ var _ = class extends t(p`
|
|
|
49
51
|
let t = e.getContext("2d");
|
|
50
52
|
if (!t) return null;
|
|
51
53
|
t.drawImage(this.videoElement, 0, 0);
|
|
52
|
-
let n = t.getImageData(0, 0, e.width, e.height)
|
|
54
|
+
let n = t.getImageData(0, 0, e.width, e.height);
|
|
55
|
+
if (!g) return null;
|
|
56
|
+
let r = g(n.data, n.width, n.height);
|
|
53
57
|
if (r && r.data) return {
|
|
54
58
|
data: r.data,
|
|
55
59
|
timestamp: Date.now()
|
|
@@ -116,5 +120,5 @@ var _ = class extends t(p`
|
|
|
116
120
|
`;
|
|
117
121
|
}
|
|
118
122
|
};
|
|
119
|
-
e([d({ type: Boolean })],
|
|
120
|
-
export {
|
|
123
|
+
e([d({ type: Boolean })], v.prototype, "continuous", void 0), e([f()], v.prototype, "hasPermission", void 0), e([f()], v.prototype, "error", void 0), e([f()], v.prototype, "showSuccess", void 0), v = e([u("schmancy-qr-scanner")], v);
|
|
124
|
+
export { v as SchmancyQRScanner };
|
package/dist/qr-scanner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qr-scanner.js","names":[],"sources":["../src/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { $LitElement } from '@mixins/litElement.mixin'\nimport jsQR from 'jsqr'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { animationFrames, Subject, timer } from 'rxjs'\nimport { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'\n\ninterface QRScanResult {\n\tdata: string\n\ttimestamp: number\n}\n\n@customElement('schmancy-qr-scanner')\nexport class SchmancyQRScanner extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: 300px;\n\t}\n`) {\n\t@property({ type: Boolean }) continuous = true\n\n\t@state() private hasPermission = false\n\t@state() private error = ''\n\t@state() private showSuccess = false\n\n\tprivate stream: MediaStream | null = null\n\tprivate destroy$ = new Subject<void>()\n\tprivate videoElement: HTMLVideoElement | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.startCamera()\n\t}\n\n\tprivate async startCamera(): Promise<void> {\n\t\ttry {\n\t\t\tconst constraints: MediaStreamConstraints = {\n\t\t\t\tvideo: {\n\t\t\t\t\tfacingMode: 'environment',\n\t\t\t\t\twidth: { ideal: 1280 },\n\t\t\t\t\theight: { ideal: 720 },\n\t\t\t\t},\n\t\t\t}\n\n\t\t\tthis.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\t\t\tthis.hasPermission = true\n\t\t\tthis.error = ''\n\n\t\t\tawait this.updateComplete\n\n\t\t\tthis.videoElement = this.shadowRoot?.querySelector('#video') as HTMLVideoElement\n\t\t\tif (this.videoElement) {\n\t\t\t\tthis.videoElement.srcObject = this.stream\n\t\t\t\tawait this.videoElement.play()\n\t\t\t\tthis.startScanning()\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Camera access denied:', error)\n\t\t\tthis.hasPermission = false\n\t\t\tthis.error = 'Camera access is required to scan QR codes. Please allow camera access and try again.'\n\t\t}\n\t}\n\n\tprivate stopCamera(): void {\n\t\tthis.destroy$.next()\n\n\t\tif (this.stream) {\n\t\t\tthis.stream.getTracks().forEach(track => track.stop())\n\t\t\tthis.stream = null\n\t\t}\n\n\t\tif (this.videoElement) {\n\t\t\tthis.videoElement.srcObject = null\n\t\t\tthis.videoElement = null\n\t\t}\n\n\t\tthis.hasPermission = false\n\t\tthis.error = ''\n\t\tthis.showSuccess = false\n\t}\n\n\tprivate startScanning(): void {\n\t\tif (!this.videoElement || !this.hasPermission) {\n\t\t\treturn\n\t\t}\n\n\t\tanimationFrames()\n\t\t\t.pipe(\n\t\t\t\tmap(() => this.scanFrame()),\n\t\t\t\tfilter((result): result is QRScanResult => result !== null),\n\t\t\t\tdistinctUntilChanged((prev, curr) => {\n\t\t\t\t\tif (prev.data !== curr.data) return false\n\t\t\t\t\treturn curr.timestamp - prev.timestamp < 2000\n\t\t\t\t}),\n\t\t\t\tthrottleTime(500),\n\t\t\t\ttakeUntil(this.destroy$),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: result => this.handleScanResult(result),\n\t\t\t\terror: error => {\n\t\t\t\t\tconsole.error('Scanning error:', error)\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tprivate scanFrame(): QRScanResult | null {\n\t\tif (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) {\n\t\t\treturn null\n\t\t}\n\n\t\ttry {\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = this.videoElement.videoWidth\n\t\t\tcanvas.height = this.videoElement.videoHeight\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return null\n\n\t\t\tctx.drawImage(this.videoElement, 0, 0)\n\t\t\tconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n\t\t\tconst code = jsQR(imageData.data, imageData.width, imageData.height)\n\n\t\t\tif (code && code.data) {\n\t\t\t\treturn {\n\t\t\t\t\tdata: code.data,\n\t\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Frame scan error:', error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\tprivate handleScanResult(result: QRScanResult): void {\n\t\tthis.showSuccessFlash()\n\n\t\t// Haptic feedback if available\n\t\tif (navigator.vibrate) {\n\t\t\tnavigator.vibrate([100, 50, 100])\n\t\t}\n\n\t\t// Audio feedback\n\t\tthis.playSuccessSound()\n\n\t\t// Dispatch scan result\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('scan-result', {\n\t\t\t\tdetail: { data: result.data, timestamp: result.timestamp },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t}\n\n\tprivate showSuccessFlash(): void {\n\t\tthis.showSuccess = true\n\t\ttimer(500)\n\t\t\t.pipe(takeUntil(this.destroy$))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showSuccess = false\n\t\t\t})\n\t}\n\n\tprivate playSuccessSound(): void {\n\t\ttry {\n\t\t\tconst AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext\n\t\t\tconst audioContext = new AudioContextClass()\n\t\t\tconst oscillator = audioContext.createOscillator()\n\t\t\tconst gainNode = audioContext.createGain()\n\n\t\t\toscillator.connect(gainNode)\n\t\t\tgainNode.connect(audioContext.destination)\n\n\t\t\toscillator.frequency.setValueAtTime(800, audioContext.currentTime)\n\t\t\toscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1)\n\n\t\t\tgainNode.gain.setValueAtTime(0.3, audioContext.currentTime)\n\t\t\tgainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)\n\n\t\t\toscillator.start(audioContext.currentTime)\n\t\t\toscillator.stop(audioContext.currentTime + 0.2)\n\t\t} catch {\n\t\t\t// Audio feedback failed silently\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.stopCamera()\n\t\tthis.destroy$.complete()\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5\">\n\t\t\t\t\t<schmancy-icon size=\"64\" class=\"mb-4\">camera_alt</schmancy-icon>\n\t\t\t\t\t<schmancy-typography type=\"headline\" token=\"md\" class=\"mb-4\">Camera Permission Required</schmancy-typography>\n\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\" class=\"mb-6 max-w-sm\">${this.error}</schmancy-typography>\n\t\t\t\t\t<schmancy-button variant=\"filled\" @click=${() => window.location.reload()}>Retry</schmancy-button>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"relative w-full h-full bg-black overflow-hidden rounded-xl\">\n\t\t\t\t<!-- Video Stream -->\n\t\t\t\t<video id=\"video\" class=\"absolute inset-0 w-full h-full object-cover\" autoplay muted playsinline></video>\n\n\t\t\t\t<!-- Success Flash -->\n\t\t\t\t${when(this.showSuccess, () => html`<div class=\"absolute inset-0 bg-green-400/30 pointer-events-none\"></div>`)}\n\n\t\t\t\t<!-- Minimal corner brackets - Apple style -->\n\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse\">\n\t\t\t\t\t<!-- Top-left corner -->\n\t\t\t\t\t<div class=\"absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl\"></div>\n\t\t\t\t\t<!-- Top-right corner -->\n\t\t\t\t\t<div class=\"absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-left corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-right corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-qr-scanner': SchmancyQRScanner\n\t}\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qr-scanner.js","names":[],"sources":["../src/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { animationFrames, Subject, timer } from 'rxjs'\nimport { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'\n\n// jsQR (~53 KB gzipped) is loaded lazily the first time a camera stream\n// is attached — see ADR 0014. Until this resolves, scanFrame() returns\n// null and no decode happens, so the animationFrames loop spins harmlessly.\ntype JsQR = typeof import('jsqr').default\nlet jsQRFn: JsQR | null = null\nlet jsQRPromise: Promise<JsQR> | null = null\nfunction loadJsQR(): Promise<JsQR> {\n\tif (jsQRPromise) return jsQRPromise\n\tjsQRPromise = import('jsqr').then(m => {\n\t\tjsQRFn = m.default\n\t\treturn m.default\n\t})\n\treturn jsQRPromise\n}\n\ninterface QRScanResult {\n\tdata: string\n\ttimestamp: number\n}\n\n@customElement('schmancy-qr-scanner')\nexport class SchmancyQRScanner extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: 300px;\n\t}\n`) {\n\t@property({ type: Boolean }) continuous = true\n\n\t@state() private hasPermission = false\n\t@state() private error = ''\n\t@state() private showSuccess = false\n\n\tprivate stream: MediaStream | null = null\n\tprivate destroy$ = new Subject<void>()\n\tprivate videoElement: HTMLVideoElement | null = null\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.startCamera()\n\t}\n\n\tprivate async startCamera(): Promise<void> {\n\t\ttry {\n\t\t\tconst constraints: MediaStreamConstraints = {\n\t\t\t\tvideo: {\n\t\t\t\t\tfacingMode: 'environment',\n\t\t\t\t\twidth: { ideal: 1280 },\n\t\t\t\t\theight: { ideal: 720 },\n\t\t\t\t},\n\t\t\t}\n\n\t\t\tthis.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\t\t\tthis.hasPermission = true\n\t\t\tthis.error = ''\n\n\t\t\tawait this.updateComplete\n\n\t\t\tthis.videoElement = this.shadowRoot?.querySelector('#video') as HTMLVideoElement\n\t\t\tif (this.videoElement) {\n\t\t\t\tthis.videoElement.srcObject = this.stream\n\t\t\t\tawait this.videoElement.play()\n\t\t\t\t// Preload jsQR before starting the animationFrames loop so the\n\t\t\t\t// first few frames have the decoder available. If the fetch\n\t\t\t\t// hasn't finished by the time a frame fires, scanFrame() just\n\t\t\t\t// returns null for that tick — no decode, no error.\n\t\t\t\tawait loadJsQR()\n\t\t\t\tif (!this.isConnected) return\n\t\t\t\tthis.startScanning()\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Camera access denied:', error)\n\t\t\tthis.hasPermission = false\n\t\t\tthis.error = 'Camera access is required to scan QR codes. Please allow camera access and try again.'\n\t\t}\n\t}\n\n\tprivate stopCamera(): void {\n\t\tthis.destroy$.next()\n\n\t\tif (this.stream) {\n\t\t\tthis.stream.getTracks().forEach(track => track.stop())\n\t\t\tthis.stream = null\n\t\t}\n\n\t\tif (this.videoElement) {\n\t\t\tthis.videoElement.srcObject = null\n\t\t\tthis.videoElement = null\n\t\t}\n\n\t\tthis.hasPermission = false\n\t\tthis.error = ''\n\t\tthis.showSuccess = false\n\t}\n\n\tprivate startScanning(): void {\n\t\tif (!this.videoElement || !this.hasPermission) {\n\t\t\treturn\n\t\t}\n\n\t\tanimationFrames()\n\t\t\t.pipe(\n\t\t\t\tmap(() => this.scanFrame()),\n\t\t\t\tfilter((result): result is QRScanResult => result !== null),\n\t\t\t\tdistinctUntilChanged((prev, curr) => {\n\t\t\t\t\tif (prev.data !== curr.data) return false\n\t\t\t\t\treturn curr.timestamp - prev.timestamp < 2000\n\t\t\t\t}),\n\t\t\t\tthrottleTime(500),\n\t\t\t\ttakeUntil(this.destroy$),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: result => this.handleScanResult(result),\n\t\t\t\terror: error => {\n\t\t\t\t\tconsole.error('Scanning error:', error)\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tprivate scanFrame(): QRScanResult | null {\n\t\tif (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) {\n\t\t\treturn null\n\t\t}\n\n\t\ttry {\n\t\t\tconst canvas = document.createElement('canvas')\n\t\t\tcanvas.width = this.videoElement.videoWidth\n\t\t\tcanvas.height = this.videoElement.videoHeight\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return null\n\n\t\t\tctx.drawImage(this.videoElement, 0, 0)\n\t\t\tconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n\t\t\t// Skip this frame if jsQR hasn't resolved yet — startCamera awaits\n\t\t\t// loadJsQR() before this path runs, so in practice jsQRFn is\n\t\t\t// always set here. Keeping the guard for safety during racy\n\t\t\t// disconnects.\n\t\t\tif (!jsQRFn) return null\n\t\t\tconst code = jsQRFn(imageData.data, imageData.width, imageData.height)\n\n\t\t\tif (code && code.data) {\n\t\t\t\treturn {\n\t\t\t\t\tdata: code.data,\n\t\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error('Frame scan error:', error)\n\t\t}\n\n\t\treturn null\n\t}\n\n\tprivate handleScanResult(result: QRScanResult): void {\n\t\tthis.showSuccessFlash()\n\n\t\t// Haptic feedback if available\n\t\tif (navigator.vibrate) {\n\t\t\tnavigator.vibrate([100, 50, 100])\n\t\t}\n\n\t\t// Audio feedback\n\t\tthis.playSuccessSound()\n\n\t\t// Dispatch scan result\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('scan-result', {\n\t\t\t\tdetail: { data: result.data, timestamp: result.timestamp },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t}\n\n\tprivate showSuccessFlash(): void {\n\t\tthis.showSuccess = true\n\t\ttimer(500)\n\t\t\t.pipe(takeUntil(this.destroy$))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showSuccess = false\n\t\t\t})\n\t}\n\n\tprivate playSuccessSound(): void {\n\t\ttry {\n\t\t\tconst AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext\n\t\t\tconst audioContext = new AudioContextClass()\n\t\t\tconst oscillator = audioContext.createOscillator()\n\t\t\tconst gainNode = audioContext.createGain()\n\n\t\t\toscillator.connect(gainNode)\n\t\t\tgainNode.connect(audioContext.destination)\n\n\t\t\toscillator.frequency.setValueAtTime(800, audioContext.currentTime)\n\t\t\toscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1)\n\n\t\t\tgainNode.gain.setValueAtTime(0.3, audioContext.currentTime)\n\t\t\tgainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)\n\n\t\t\toscillator.start(audioContext.currentTime)\n\t\t\toscillator.stop(audioContext.currentTime + 0.2)\n\t\t} catch {\n\t\t\t// Audio feedback failed silently\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.stopCamera()\n\t\tthis.destroy$.complete()\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn html`\n\t\t\t\t<div class=\"w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5\">\n\t\t\t\t\t<schmancy-icon size=\"64\" class=\"mb-4\">camera_alt</schmancy-icon>\n\t\t\t\t\t<schmancy-typography type=\"headline\" token=\"md\" class=\"mb-4\">Camera Permission Required</schmancy-typography>\n\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\" class=\"mb-6 max-w-sm\">${this.error}</schmancy-typography>\n\t\t\t\t\t<schmancy-button variant=\"filled\" @click=${() => window.location.reload()}>Retry</schmancy-button>\n\t\t\t\t</div>\n\t\t\t`\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=\"relative w-full h-full bg-black overflow-hidden rounded-xl\">\n\t\t\t\t<!-- Video Stream -->\n\t\t\t\t<video id=\"video\" class=\"absolute inset-0 w-full h-full object-cover\" autoplay muted playsinline></video>\n\n\t\t\t\t<!-- Success Flash -->\n\t\t\t\t${when(this.showSuccess, () => html`<div class=\"absolute inset-0 bg-green-400/30 pointer-events-none\"></div>`)}\n\n\t\t\t\t<!-- Minimal corner brackets - Apple style -->\n\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse\">\n\t\t\t\t\t<!-- Top-left corner -->\n\t\t\t\t\t<div class=\"absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl\"></div>\n\t\t\t\t\t<!-- Top-right corner -->\n\t\t\t\t\t<div class=\"absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-left corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl\"></div>\n\t\t\t\t\t<!-- Bottom-right corner -->\n\t\t\t\t\t<div class=\"absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-qr-scanner': SchmancyQRScanner\n\t}\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,25 @@
|
|
|
1
1
|
import { $LitElement } from '@mixins/litElement.mixin'
|
|
2
|
-
import jsQR from 'jsqr'
|
|
3
2
|
import { css, html } from 'lit'
|
|
4
3
|
import { customElement, property, state } from 'lit/decorators.js'
|
|
5
4
|
import { when } from 'lit/directives/when.js'
|
|
6
5
|
import { animationFrames, Subject, timer } from 'rxjs'
|
|
7
6
|
import { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'
|
|
8
7
|
|
|
8
|
+
// jsQR (~53 KB gzipped) is loaded lazily the first time a camera stream
|
|
9
|
+
// is attached — see ADR 0014. Until this resolves, scanFrame() returns
|
|
10
|
+
// null and no decode happens, so the animationFrames loop spins harmlessly.
|
|
11
|
+
type JsQR = typeof import('jsqr').default
|
|
12
|
+
let jsQRFn: JsQR | null = null
|
|
13
|
+
let jsQRPromise: Promise<JsQR> | null = null
|
|
14
|
+
function loadJsQR(): Promise<JsQR> {
|
|
15
|
+
if (jsQRPromise) return jsQRPromise
|
|
16
|
+
jsQRPromise = import('jsqr').then(m => {
|
|
17
|
+
jsQRFn = m.default
|
|
18
|
+
return m.default
|
|
19
|
+
})
|
|
20
|
+
return jsQRPromise
|
|
21
|
+
}
|
|
22
|
+
|
|
9
23
|
interface QRScanResult {
|
|
10
24
|
data: string
|
|
11
25
|
timestamp: number
|
|
@@ -55,6 +69,12 @@ export class SchmancyQRScanner extends $LitElement(css`
|
|
|
55
69
|
if (this.videoElement) {
|
|
56
70
|
this.videoElement.srcObject = this.stream
|
|
57
71
|
await this.videoElement.play()
|
|
72
|
+
// Preload jsQR before starting the animationFrames loop so the
|
|
73
|
+
// first few frames have the decoder available. If the fetch
|
|
74
|
+
// hasn't finished by the time a frame fires, scanFrame() just
|
|
75
|
+
// returns null for that tick — no decode, no error.
|
|
76
|
+
await loadJsQR()
|
|
77
|
+
if (!this.isConnected) return
|
|
58
78
|
this.startScanning()
|
|
59
79
|
}
|
|
60
80
|
} catch (error) {
|
|
@@ -122,7 +142,12 @@ export class SchmancyQRScanner extends $LitElement(css`
|
|
|
122
142
|
ctx.drawImage(this.videoElement, 0, 0)
|
|
123
143
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
|
|
124
144
|
|
|
125
|
-
|
|
145
|
+
// Skip this frame if jsQR hasn't resolved yet — startCamera awaits
|
|
146
|
+
// loadJsQR() before this path runs, so in practice jsQRFn is
|
|
147
|
+
// always set here. Keeping the guard for safety during racy
|
|
148
|
+
// disconnects.
|
|
149
|
+
if (!jsQRFn) return null
|
|
150
|
+
const code = jsQRFn(imageData.data, imageData.width, imageData.height)
|
|
126
151
|
|
|
127
152
|
if (code && code.data) {
|
|
128
153
|
return {
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|