@karnstack/kino 0.1.0 → 0.1.2

package/README.md

@@ -57,6 +57,16 @@ Give the player a sized container. It fills `100%` width and height of its paren
 
 kino is auth-agnostic. For signed playback you mint the `playback`, `thumbnail`, and `storyboard` tokens server-side and hand them to the player through the `tokens` prop. The player never holds a signing key and never talks to your auth layer; it only appends the tokens you give it to the media, thumbnail, and storyboard URLs. For public playback you can omit `tokens` entirely.
 
+### Blur-up placeholder
+
+Before the poster and first frame load, the video box is empty. Pass a small `placeholder` (a base64 data URI or a URL) and kino paints it behind the video as a blur-up; the sharp poster covers it once decoded, and it reappears briefly across source swaps.
+
+```tsx
+<MuxPlayer playbackId="..." placeholder={blurDataUrl} />
+```
+
+The poster itself stays the signed Mux thumbnail (kino derives it from `playbackId` + the `thumbnail` token), so `placeholder` is purely the instant low-res layer underneath.
+
 ## Theming
 
 The quickest knob is the `accentColor` prop, which drives the scrubber fill, active menu items, and range controls.

package/dist/{control-bar-DWzMIb23.js → control-bar-DrAeqaap.js}

@@ -403,7 +403,7 @@ function useIsCompact() {
 	return useContext(CompactContext);
 }
 const ControlsVisibilityContext = createContext(null);
-function Player({ provider, accentColor, theme, className, children }) {
+function Player({ provider, accentColor, theme, className, placeholder, children }) {
 	const wrapperRef = useRef(null);
 	const videoHostRef = useRef(null);
 	const hoveredRef = useRef(false);
@@ -496,13 +496,23 @@ function Player({ provider, accentColor, theme, className, children }) {
 				className: ["kino", className].filter(Boolean).join(" "),
 				style,
 				tabIndex: 0,
-				children: [/* @__PURE__ */ jsx("div", {
-					ref: videoHostRef,
-					className: "kino-video-host"
-				}), /* @__PURE__ */ jsx(PlayerChrome, {
-					compact,
-					children
-				})]
+				children: [
+					placeholder && /* @__PURE__ */ jsx("img", {
+						className: "kino-placeholder",
+						src: placeholder,
+						alt: "",
+						"aria-hidden": "true",
+						draggable: false
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: videoHostRef,
+						className: "kino-video-host"
+					}),
+					/* @__PURE__ */ jsx(PlayerChrome, {
+						compact,
+						children
+					})
+				]
 			})
 		})
 	});

package/dist/index.d.ts

@@ -21,6 +21,12 @@ type PlayerProps = {
   accentColor?: string;
   theme?: Record<string, string>;
   className?: string;
+  /**
+   * Low-res still (data URI or URL) painted behind the video while the poster
+   * and first frame load — a blur-up. The sharp poster covers it once decoded,
+   * so it only shows during the initial load and across source swaps.
+   */
+  placeholder?: string;
   children?: ReactNode;
 };
 declare function Player({
@@ -28,6 +34,7 @@ declare function Player({
   accentColor,
   theme,
   className,
+  placeholder,
   children
 }: PlayerProps): import("react").JSX.Element;
 declare namespace Player {

package/dist/index.js

@@ -1,2 +1,2 @@
-import { _ as usePlayer, a as SkipBackButton, c as Captions, d as Player, f as useControlsVisible, g as useMediaSelector, h as PlayerContext, i as PlayPauseButton, l as IdleOverlay, m as useWrapperRef, n as FullscreenButton, o as SkipForwardButton, p as useIsCompact, r as PipButton, s as VolumeControl, t as ControlBar, u as Scrubber, v as usePlayerActions, y as formatTime } from "./control-bar-DWzMIb23.js";
+import { _ as usePlayer, a as SkipBackButton, c as Captions, d as Player, f as useControlsVisible, g as useMediaSelector, h as PlayerContext, i as PlayPauseButton, l as IdleOverlay, m as useWrapperRef, n as FullscreenButton, o as SkipForwardButton, p as useIsCompact, r as PipButton, s as VolumeControl, t as ControlBar, u as Scrubber, v as usePlayerActions, y as formatTime } from "./control-bar-DrAeqaap.js";
 export { Captions, ControlBar, FullscreenButton, IdleOverlay, PipButton, PlayPauseButton, Player, PlayerContext, Scrubber, SkipBackButton, SkipForwardButton, VolumeControl, formatTime, useControlsVisible, useIsCompact, useMediaSelector, usePlayer, usePlayerActions, useWrapperRef };

package/dist/mux.d.ts

@@ -24,13 +24,15 @@ declare function createMuxProvider(opts: MuxProviderOptions): Provider;
 type MuxPlayerProps = MuxProviderOptions & {
   accentColor?: string;
   theme?: Record<string, string>;
-  className?: string;
+  className?: string; /** Blur-up still painted behind the video until the poster/first frame loads. */
+  placeholder?: string;
   children?: ReactNode;
 };
 declare function MuxPlayer({
   accentColor,
   theme,
   className,
+  placeholder,
   children,
   ...opts
 }: MuxPlayerProps): import("react").JSX.Element;

package/dist/mux.js

@@ -1,4 +1,4 @@
-import { c as Captions, d as Player, l as IdleOverlay, t as ControlBar } from "./control-bar-DWzMIb23.js";
+import { c as Captions, d as Player, l as IdleOverlay, t as ControlBar } from "./control-bar-DrAeqaap.js";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "@mux/mux-video";
@@ -99,6 +99,7 @@ function createMuxProvider(opts) {
 			hasTextTracks: true
 		}
 	};
+	let desiredRate = opts.defaultRate ?? 1;
 	const listeners = /* @__PURE__ */ new Set();
 	const emit = () => listeners.forEach((l) => l());
 	const patch = (p) => {
@@ -193,6 +194,7 @@ function createMuxProvider(opts) {
 	const syncFromEl = () => {
 		if (!el) return;
 		bindRenditions();
+		if (el.playbackRate !== desiredRate) el.playbackRate = desiredRate;
 		applyTextTrackModes();
 		const ranges = [];
 		for (let i = 0; i < el.buffered.length; i++) ranges.push([el.buffered.start(i), el.buffered.end(i)]);
@@ -201,7 +203,7 @@ function createMuxProvider(opts) {
 			currentTime: el.currentTime,
 			duration: el.duration || 0,
 			buffered: ranges,
-			rate: el.playbackRate,
+			rate: desiredRate,
 			volume: el.volume,
 			muted: el.muted,
 			readyState: el.readyState,
@@ -275,7 +277,9 @@ function createMuxProvider(opts) {
 			if (el) el.currentTime = t;
 		},
 		setRate: (r) => {
+			desiredRate = r;
 			if (el) el.playbackRate = r;
+			patch({ rate: r });
 		},
 		setVolume: (v) => {
 			if (el) el.volume = Math.min(1, Math.max(0, v));
@@ -329,7 +333,7 @@ function createMuxProvider(opts) {
 			el.playsInline = true;
 			el.poster = opts.poster ?? buildImageUrl(opts.playbackId, "thumbnail", opts.tokens?.thumbnail);
 			if (opts.autoPlay) el.autoplay = true;
-			el.playbackRate = state.rate;
+			el.playbackRate = desiredRate;
 			if (opts.envKey) el.envKey = opts.envKey;
 			if (opts.metadata) el.metadata = {
 				video_id: opts.metadata.videoId,
@@ -399,7 +403,7 @@ function createMuxProvider(opts) {
 }
 //#endregion
 //#region src/mux/mux-player.tsx
-function MuxPlayer({ accentColor, theme, className, children, ...opts }) {
+function MuxPlayer({ accentColor, theme, className, placeholder, children, ...opts }) {
 	const providerRef = useRef(null);
 	if (providerRef.current === null) providerRef.current = createMuxProvider(opts);
 	const provider = providerRef.current;
@@ -427,6 +431,7 @@ function MuxPlayer({ accentColor, theme, className, children, ...opts }) {
 		accentColor,
 		theme,
 		className,
+		placeholder,
 		children: [
 			/* @__PURE__ */ jsx(IdleOverlay, {}),
 			/* @__PURE__ */ jsx(Captions, {}),

package/dist/styles.css

@@ -34,6 +34,18 @@
   width: 100%;
   height: 100%;
 }
+.kino .kino-placeholder {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Same level as the video host but earlier in the DOM, so the video element
+     (and its sharp poster, once decoded) paints over this blur-up. */
+  z-index: 0;
+  pointer-events: none;
+  user-select: none;
+}
 .kino .kino-video-host {
   position: absolute;
   inset: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karnstack/kino",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Themeable React video player with pluggable providers.",
   "license": "MIT",
   "author": "Karn",