@autono/pinbox-toolbar 0.12.0 → 0.13.0

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-C-gslo8y.js";
+import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-C3zvwQrr.js";
 export { HubError, HubTransport, Pinbox, PinboxToolbarElement, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, upsertPin };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-C-gslo8y.js";
+import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-C3zvwQrr.js";
 import { createElement, useEffect, useRef } from "react";
 //#region src/react.ts
 /**

package/dist/{src-C-gslo8y.js → src-C3zvwQrr.js}

@@ -837,6 +837,39 @@ async function firstFrame(win, stream) {
 	});
 	return video;
 }
+/**
+* The one live capture stream, reused across pins. getDisplayMedia MUST
+* prompt on every call (spec — no persistent grant exists), so the only way
+* to stop asking per pin is to never re-call it: prompt once, keep the track,
+* and read a fresh frame from the still-playing video for every capture.
+* The browser's "sharing this tab" indicator stays on while the track lives —
+* honest, and the user ending it from there simply re-prompts on the next pin.
+*/
+let liveCapture = null;
+async function captureVideo(win, media) {
+	const track = liveCapture?.stream.getVideoTracks()[0];
+	if (liveCapture && track?.readyState === "live") return liveCapture.video;
+	releaseCapture();
+	const stream = await media.getDisplayMedia({
+		video: true,
+		audio: false,
+		preferCurrentTab: true
+	});
+	const video = await firstFrame(win, stream);
+	stream.getVideoTracks()[0]?.addEventListener("ended", releaseCapture, { once: true });
+	liveCapture = {
+		stream,
+		video
+	};
+	return video;
+}
+/** Stop the cached stream (toolbar disconnect; also the track-ended handler). */
+function releaseCapture() {
+	if (liveCapture === null) return;
+	for (const t of liveCapture.stream.getTracks()) t.stop();
+	liveCapture.video.srcObject = null;
+	liveCapture = null;
+}
 /** webp-encode a bitmap; also emit the ≤32px placeholder data URL. */
 async function encode(bmp) {
 	const canvas = new OffscreenCanvas(bmp.width, bmp.height);
@@ -876,21 +909,14 @@ async function captureElement(el) {
 	const crop = visibleCropRect(el);
 	if (source === null || crop === null) return null;
 	const { win, media } = source;
-	let stream = null;
 	try {
-		stream = await media.getDisplayMedia({
-			video: true,
-			audio: false,
-			preferCurrentTab: true
-		});
-		const video = await firstFrame(win, stream);
+		const video = await captureVideo(win, media);
 		const sx = video.videoWidth / win.innerWidth;
 		const sy = video.videoHeight / win.innerHeight;
 		return await encode(await createImageBitmap(video, Math.round(crop.x * sx), Math.round(crop.y * sy), Math.max(1, Math.round(crop.width * sx)), Math.max(1, Math.round(crop.height * sy))));
 	} catch {
+		releaseCapture();
 		return null;
-	} finally {
-		if (stream) for (const track of stream.getTracks()) track.stop();
 	}
 }
 /**
@@ -2645,6 +2671,7 @@ var PinboxToolbarElement = class extends BaseElement {
 		this.#aim = null;
 		this.#min?.destroy();
 		this.#min = null;
+		releaseCapture();
 		this.#unsubscribe?.();
 		this.#unsubscribe = null;
 		this.#pageStyle?.remove();

package/dist/svelte.js

@@ -1,4 +1,4 @@
-import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-C-gslo8y.js";
+import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-C3zvwQrr.js";
 //#region src/svelte.ts
 /**
 * `<div use:pinbox={{ endpoint }} />` — creates + configures the element BEFORE insertion

package/dist/toolbar.iife.js

@@ -839,6 +839,39 @@ var Pinbox = (function(exports) {
 		});
 		return video;
 	}
+	/**
+	* The one live capture stream, reused across pins. getDisplayMedia MUST
+	* prompt on every call (spec — no persistent grant exists), so the only way
+	* to stop asking per pin is to never re-call it: prompt once, keep the track,
+	* and read a fresh frame from the still-playing video for every capture.
+	* The browser's "sharing this tab" indicator stays on while the track lives —
+	* honest, and the user ending it from there simply re-prompts on the next pin.
+	*/
+	let liveCapture = null;
+	async function captureVideo(win, media) {
+		const track = liveCapture?.stream.getVideoTracks()[0];
+		if (liveCapture && track?.readyState === "live") return liveCapture.video;
+		releaseCapture();
+		const stream = await media.getDisplayMedia({
+			video: true,
+			audio: false,
+			preferCurrentTab: true
+		});
+		const video = await firstFrame(win, stream);
+		stream.getVideoTracks()[0]?.addEventListener("ended", releaseCapture, { once: true });
+		liveCapture = {
+			stream,
+			video
+		};
+		return video;
+	}
+	/** Stop the cached stream (toolbar disconnect; also the track-ended handler). */
+	function releaseCapture() {
+		if (liveCapture === null) return;
+		for (const t of liveCapture.stream.getTracks()) t.stop();
+		liveCapture.video.srcObject = null;
+		liveCapture = null;
+	}
 	/** webp-encode a bitmap; also emit the ≤32px placeholder data URL. */
 	async function encode(bmp) {
 		const canvas = new OffscreenCanvas(bmp.width, bmp.height);
@@ -878,21 +911,14 @@ var Pinbox = (function(exports) {
 		const crop = visibleCropRect(el);
 		if (source === null || crop === null) return null;
 		const { win, media } = source;
-		let stream = null;
 		try {
-			stream = await media.getDisplayMedia({
-				video: true,
-				audio: false,
-				preferCurrentTab: true
-			});
-			const video = await firstFrame(win, stream);
+			const video = await captureVideo(win, media);
 			const sx = video.videoWidth / win.innerWidth;
 			const sy = video.videoHeight / win.innerHeight;
 			return await encode(await createImageBitmap(video, Math.round(crop.x * sx), Math.round(crop.y * sy), Math.max(1, Math.round(crop.width * sx)), Math.max(1, Math.round(crop.height * sy))));
 		} catch {
+			releaseCapture();
 			return null;
-		} finally {
-			if (stream) for (const track of stream.getTracks()) track.stop();
 		}
 	}
 	/**
@@ -2647,6 +2673,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 			this.#aim = null;
 			this.#min?.destroy();
 			this.#min = null;
+			releaseCapture();
 			this.#unsubscribe?.();
 			this.#unsubscribe = null;
 			this.#pageStyle?.remove();

package/dist/vue.js

@@ -1,4 +1,4 @@
-import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-C-gslo8y.js";
+import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-C3zvwQrr.js";
 import { h } from "vue";
 //#region src/vue.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/pinbox-toolbar",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -71,7 +71,7 @@
     }
   },
   "devDependencies": {
-    "@autono/pinbox-core": "0.12.0",
+    "@autono/pinbox-core": "0.13.0",
     "@types/react": "^19.2.0",
     "typescript": "^7.0.0",
     "tsdown": "^0.22.0",