@rinzai/zen 0.14.0 → 0.16.0

package/dist/utils/useMediaPlayer.d.ts

@@ -0,0 +1,38 @@
+import { RefCallback } from 'react';
+export interface MediaState {
+    /** Playing, or about to (not paused). */
+    playing: boolean;
+    /** Playing but stalled, waiting for data. */
+    waiting: boolean;
+    ended: boolean;
+    /** Seconds in. */
+    currentTime: number;
+    /** Seconds long; 0 until known, and for a live stream. */
+    duration: number;
+    /** Seconds loaded from the start of the stretch being played: how far it can play without waiting. */
+    buffered: number;
+    /** 0 to 1. */
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    error: MediaError | null;
+}
+export interface MediaPlayer extends MediaState {
+    /** Rejects when the browser won't play yet (autoplay before any tap) or can't play the source. */
+    play: () => Promise<void>;
+    pause: () => void;
+    toggle: () => Promise<void>;
+    /** Jump to a time, in seconds. */
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    setMuted: (muted: boolean) => void;
+}
+/**
+ * Plays audio or video through your own <audio> or <video> element, and keeps
+ * its state for the UI: playing, time, duration, buffered, volume. Returns the
+ * ref for the element, kept apart from the player so reading the player isn't
+ * reading a ref: `const [ref, player] = useMediaPlayer(); <audio ref={ref} />`.
+ * Pair it with SeekBar, and with useMediaSession for the lock screen and media keys.
+ */
+export declare function useMediaPlayer(): [ref: RefCallback<HTMLMediaElement>, player: MediaPlayer];
+//# sourceMappingURL=useMediaPlayer.d.ts.map

package/dist/utils/useMediaPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaPlayer.d.ts","sourceRoot":"","sources":["../../packages/utils/useMediaPlayer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0C,MAAM,OAAO,CAAC;AAE5E,MAAM,WAAW,UAAU;IACvB,yCAAyC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,sGAAsG;IACtG,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C,kGAAkG;IAClG,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,kCAAkC;IAClC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAuDD;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,CA8C1F"}

package/dist/utils/useMediaPlayer.js

@@ -0,0 +1,91 @@
+"use client";
+import { useCallback as e, useMemo as t, useRef as n, useState as r } from "react";
+//#region packages/utils/useMediaPlayer.ts
+var i = [
+	"play",
+	"pause",
+	"playing",
+	"waiting",
+	"ended",
+	"timeupdate",
+	"durationchange",
+	"loadedmetadata",
+	"progress",
+	"seeking",
+	"volumechange",
+	"ratechange",
+	"emptied",
+	"error"
+], a = {
+	playing: !1,
+	waiting: !1,
+	ended: !1,
+	currentTime: 0,
+	duration: 0,
+	buffered: 0,
+	volume: 1,
+	muted: !1,
+	playbackRate: 1,
+	error: null
+};
+function o(e) {
+	let t = e.currentTime, n = 0;
+	for (let r = 0; r < e.buffered.length; r++) e.buffered.start(r) <= t && t <= e.buffered.end(r) && (n = e.buffered.end(r));
+	return {
+		playing: !e.paused,
+		waiting: !e.paused && e.readyState < HTMLMediaElement.HAVE_FUTURE_DATA,
+		ended: e.ended,
+		currentTime: t,
+		duration: Number.isFinite(e.duration) ? e.duration : 0,
+		buffered: n,
+		volume: e.volume,
+		muted: e.muted,
+		playbackRate: e.playbackRate,
+		error: e.error
+	};
+}
+var s = (e, t) => Object.keys(e).every((n) => Object.is(e[n], t[n]));
+function c() {
+	let [c, l] = r(a), u = n(null), d = e((e) => {
+		if (!e) return;
+		u.current = e;
+		let t = () => l((t) => s(t, o(e)) ? t : o(e));
+		t();
+		for (let n of i) e.addEventListener(n, t);
+		return () => {
+			for (let n of i) e.removeEventListener(n, t);
+			u.current === e && (u.current = null);
+		};
+	}, []), f = t(() => {
+		let e = async () => {
+			try {
+				await u.current?.play();
+			} catch (e) {
+				if (!(e instanceof DOMException && e.name === "AbortError")) throw e;
+			}
+		}, t = () => u.current?.pause();
+		return {
+			play: e,
+			pause: t,
+			toggle: () => u.current?.paused === !1 ? Promise.resolve(t()) : e(),
+			seek: (e) => {
+				let t = u.current;
+				if (!t) return;
+				let n = Number.isFinite(t.duration) ? t.duration : Infinity;
+				t.currentTime = Math.min(Math.max(e, 0), n);
+			},
+			setVolume: (e) => {
+				u.current && (u.current.volume = Math.min(Math.max(e, 0), 1));
+			},
+			setMuted: (e) => {
+				u.current && (u.current.muted = e);
+			}
+		};
+	}, []);
+	return [d, {
+		...c,
+		...f
+	}];
+}
+//#endregion
+export { c as useMediaPlayer };

package/dist/utils/useMediaSession.d.ts

@@ -0,0 +1,24 @@
+import { MediaPlayer } from './useMediaPlayer';
+export interface MediaSessionOptions {
+    title?: string;
+    artist?: string;
+    album?: string;
+    /** Cover art, e.g. `[{ src: '/cover-512.jpg', sizes: '512x512', type: 'image/jpeg' }]`. */
+    artwork?: MediaImage[];
+    /** Shows a previous button on the lock screen and makes the key work. */
+    onPrevious?: () => void;
+    /** Shows a next button on the lock screen and makes the key work. */
+    onNext?: () => void;
+    /** Seconds the skip back and forward buttons move (default 10). */
+    seekOffset?: number;
+}
+/** What useMediaSession needs from a player: useMediaPlayer's, or your own. */
+export type MediaSessionPlayer = Pick<MediaPlayer, 'playing' | 'currentTime' | 'duration' | 'playbackRate' | 'play' | 'pause' | 'seek'>;
+/**
+ * Puts what's playing on the lock screen, the notification shade and the OS
+ * media controls (title, artist, cover, position), and makes play, pause,
+ * seek, previous, next and the keyboard's media keys control your player.
+ * Does nothing where the browser has no Media Session API.
+ */
+export declare function useMediaSession(player: MediaSessionPlayer, options?: MediaSessionOptions): void;
+//# sourceMappingURL=useMediaSession.d.ts.map

package/dist/utils/useMediaSession.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaSession.d.ts","sourceRoot":"","sources":["../../packages/utils/useMediaSession.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,+EAA+E;AAC/E,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACjC,WAAW,EACX,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CACtF,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,GAAE,mBAAwB,QAuE5F"}

package/dist/utils/useMediaSession.js

@@ -0,0 +1,76 @@
+"use client";
+import { useEffect as e, useLayoutEffect as t, useRef as n } from "react";
+//#region packages/utils/useMediaSession.ts
+function r(r, i = {}) {
+	let { title: a, artist: o, album: s, artwork: c, onPrevious: l, onNext: u } = i, d = n({
+		player: r,
+		options: i
+	});
+	t(() => {
+		d.current = {
+			player: r,
+			options: i
+		};
+	});
+	let f = typeof navigator < "u" && "mediaSession" in navigator, p = JSON.stringify(c ?? []);
+	e(() => {
+		if (f) return navigator.mediaSession.metadata = new MediaMetadata({
+			title: a,
+			artist: o,
+			album: s,
+			artwork: JSON.parse(p)
+		}), () => {
+			navigator.mediaSession.metadata = null;
+		};
+	}, [
+		f,
+		a,
+		o,
+		s,
+		p
+	]), e(() => {
+		f && (navigator.mediaSession.playbackState = r.playing ? "playing" : "paused");
+	}, [f, r.playing]);
+	let { duration: m, currentTime: h, playbackRate: g } = r;
+	e(() => {
+		if (f) try {
+			m > 0 ? navigator.mediaSession.setPositionState({
+				duration: m,
+				position: Math.min(h, m),
+				playbackRate: g || 1
+			}) : navigator.mediaSession.setPositionState();
+		} catch {}
+	}, [
+		f,
+		m,
+		h,
+		g
+	]);
+	let _ = !!l, v = !!u;
+	e(() => {
+		if (!f) return;
+		let e = () => d.current.options.seekOffset ?? 10, t = () => d.current.player, n = [
+			["play", () => void t().play().catch(() => {})],
+			["pause", () => t().pause()],
+			["seekto", (e) => e.seekTime != null && t().seek(e.seekTime)],
+			["seekbackward", (n) => t().seek(t().currentTime - (n.seekOffset ?? e()))],
+			["seekforward", (n) => t().seek(t().currentTime + (n.seekOffset ?? e()))],
+			["previoustrack", _ ? () => d.current.options.onPrevious?.() : null],
+			["nexttrack", v ? () => d.current.options.onNext?.() : null]
+		], r = (e, t) => {
+			try {
+				navigator.mediaSession.setActionHandler(e, t);
+			} catch {}
+		};
+		for (let [e, t] of n) r(e, t);
+		return () => {
+			for (let [e] of n) r(e, null);
+		};
+	}, [
+		f,
+		_,
+		v
+	]);
+}
+//#endregion
+export { r as useMediaSession };

package/dist/utils/useVirtualList.d.ts

@@ -10,7 +10,7 @@ export interface VirtualItem {
  * rows in view (plus `overscan` either side) are rendered. Position each item
  * absolutely at `start` inside a container `totalSize` px tall.
  */
-export declare function useVirtualList({ count, itemHeight, scrollRef, overscan }: VirtualListOptions): {
+export declare function useVirtualList({ count, itemHeight, scrollRef, overscan, keep }: VirtualListOptions): {
     items: VirtualItem[];
     totalSize: number;
     /** Space above the rendered rows (for a table: a TableSpacerRow of this height). */
@@ -26,5 +26,10 @@ export interface VirtualListOptions {
     scrollRef: RefObject<HTMLElement | null>;
     /** Extra rows rendered above and below the visible ones, so fast scrolling doesn't show gaps. */
     overscan?: number;
+    /**
+     * A row to render even out of view, e.g. one being dragged (SortableList's
+     * `onLiftedChange`); the rows between come too, so they stay one run.
+     */
+    keep?: number;
 }
 //# sourceMappingURL=useVirtualList.d.ts.map

package/dist/utils/useVirtualList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualList.d.ts","sourceRoot":"","sources":["../../packages/utils/useVirtualList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAY,EAAE,EAAE,kBAAkB;;;IAyCzF,oFAAoF;;IAEpF,qCAAqC;;EAG5C;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"useVirtualList.d.ts","sourceRoot":"","sources":["../../packages/utils/useVirtualList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAY,EAAE,IAAI,EAAE,EAAE,kBAAkB;;;IA0C/F,oFAAoF;;IAEpF,qCAAqC;;EAG5C;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/utils/useVirtualList.js

@@ -1,20 +1,20 @@
 "use client";
 import { useLayoutEffect as e, useState as t } from "react";
 //#region packages/utils/useVirtualList.ts
-function n({ count: n, itemHeight: r, scrollRef: i, overscan: a = 6 }) {
-	let o = (e, t) => {
+function n({ count: n, itemHeight: r, scrollRef: i, overscan: a = 6, keep: o }) {
+	let s = (e, t) => {
 		let i = t || r * 10;
 		return {
 			first: Math.max(0, Math.floor(e / r) - a),
 			last: Math.min(n, Math.ceil((e + i) / r) + a)
 		};
-	}, [s, c] = t(() => o(0, 0));
+	}, [c, l] = t(() => s(0, 0));
 	e(() => {
 		let e = i.current;
 		if (!e) return;
 		let t = () => {
-			let t = o(e.scrollTop, e.clientHeight);
-			c((e) => e.first === t.first && e.last === t.last ? e : t);
+			let t = s(e.scrollTop, e.clientHeight);
+			l((e) => e.first === t.first && e.last === t.last ? e : t);
 		};
 		t(), e.addEventListener("scroll", t, { passive: !0 });
 		let n = typeof ResizeObserver > "u" ? null : new ResizeObserver(t);
@@ -27,18 +27,18 @@ function n({ count: n, itemHeight: r, scrollRef: i, overscan: a = 6 }) {
 		r,
 		a
 	]);
-	let l = Math.min(s.first, n), u = Math.min(s.last, n), d = [];
-	for (let e = l; e < u; e++) d.push({
+	let u = o !== void 0 && o >= 0 && o < n, d = Math.min(u ? Math.min(c.first, o) : c.first, n), f = Math.min(u ? Math.max(c.last, o + 1) : c.last, n), p = [];
+	for (let e = d; e < f; e++) p.push({
 		index: e,
 		start: e * r,
 		size: r
 	});
-	let f = n * r;
+	let m = n * r;
 	return {
-		items: d,
-		totalSize: f,
-		paddingTop: d.length ? d[0].start : 0,
-		paddingBottom: d.length ? f - (d[d.length - 1].start + r) : 0
+		items: p,
+		totalSize: m,
+		paddingTop: p.length ? p[0].start : 0,
+		paddingBottom: p.length ? m - (p[p.length - 1].start + r) : 0
 	};
 }
 //#endregion