@cesarvenzac/closeup 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 Film any part of a web page in close-up, sharp at any size: photos and videos of an element or
 a region, with a drawn macOS-like cursor that follows your mouse or plays a path you draw, on a
-background, with click sounds.
+background, with click sounds. Try it on [its page](https://cesarvenzac.com/lab/closeup).
 
 ```sh
 npm install @cesarvenzac/closeup
@@ -24,6 +24,14 @@ addEventListener("keydown", (event) => {
 });
 ```
 
+Or open it on an element, ready to film, from a button of your own:
+
+```ts
+import { open } from "@cesarvenzac/closeup";
+
+filmIt.addEventListener("click", () => open({ pick: document.querySelector("#demo") }));
+```
+
 Press the shortcut, point at an element (↑ and ↓ widen and narrow the pick) or draw a region,
 choose a photo or a video, and press Record. Chrome asks once to share the tab. Options set the
 shape (16:9, 1:1, 4:5, 9:16 or the pick's own), the room round the pick, a background (a colour,

package/dist/index.d.ts

@@ -15,7 +15,10 @@ export { parseScript, type Script, type Step, type Target } from "./script.ts";
 export type { Settings } from "./settings.ts";
 export { loadScript, saveScript } from "./store.ts";
 export declare const DEFAULT_SHORTCUT = "Alt+Shift+C";
-export declare const open: () => void;
+/** Opens Closeup. With `pick`, an element of the page, it opens on it, ready to film; without, it asks what to film. */
+export declare const open: ({ pick }?: {
+    pick?: Element | null;
+}) => void;
 export declare const close: () => void | undefined;
 export declare const toggle: () => void;
 /** Opens and closes Closeup with `shortcut` (⌥⇧C unless told otherwise). Returns what removes it. */

package/dist/index.js

@@ -19,7 +19,8 @@ export const DEFAULT_SHORTCUT = "Alt+Shift+C";
 let panel = null;
 let label = shortcutLabel(parseShortcut(DEFAULT_SHORTCUT));
 const instance = () => (panel ??= new Panel(label));
-export const open = () => instance().open();
+/** Opens Closeup. With `pick`, an element of the page, it opens on it, ready to film; without, it asks what to film. */
+export const open = ({ pick } = {}) => instance().open(pick ?? undefined);
 export const close = () => panel?.close();
 export const toggle = () => instance().toggle();
 /** Opens and closes Closeup with `shortcut` (⌥⇧C unless told otherwise). Returns what removes it. */

package/dist/ui/panel.d.ts

@@ -32,7 +32,8 @@ export declare class Panel {
     private rehearsal;
     constructor(shortcutLabel: string);
     get isOpen(): boolean;
-    open(): void;
+    /** Opens on `pick`, an element of the page, ready to film; without one, asks what to film. */
+    open(pick?: Element): void;
     close(): void;
     toggle(): void;
     private startPick;

package/dist/ui/panel.js

@@ -90,7 +90,11 @@ export class Panel {
     get isOpen() {
         return this.mounted;
     }
-    open() {
+    /** Opens on `pick`, an element of the page, ready to film; without one, asks what to film. */
+    open(pick) {
+        // Already filming, editing or showing a take: that comes first.
+        if (this.mounted && this.state !== "idle" && this.state !== "picking" && this.state !== "picked")
+            return;
         if (!this.mounted) {
             document.documentElement.append(this.layer, this.ui);
             this.mounted = true;
@@ -104,7 +108,9 @@ export class Panel {
         }
         this.$(".bar").hidden = false;
         this.renderBar();
-        if (!this.picked)
+        if (pick?.isConnected)
+            this.choose({ element: pick, rect: toRect(pick.getBoundingClientRect()), label: describe(pick) });
+        else if (!this.picked)
             this.startPick();
         else
             this.showPicked();

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@cesarvenzac/closeup",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Film any part of a web page in close-up, sharp at any size: photos and videos with a drawn cursor, backgrounds and sound.",
   "keywords": ["screen-recording", "screencast", "screenshot", "video", "cursor", "demo", "region-capture", "browser"],
-  "homepage": "https://github.com/cesarvenzac/closeup#readme",
+  "homepage": "https://cesarvenzac.com/lab/closeup",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cesarvenzac/closeup.git"