@karnstack/kino 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import { a as Provider, c as TextTrackInfo, i as PlayerActions, n as MediaError, o as QualityLevel, r as MediaState, s as SourceOptions, t as Capabilities } from "./types-D0bLitH2.js";
+import { ReactNode, RefObject } from "react";
+
+//#region src/util/format-time.d.ts
+declare function formatTime(seconds: number): string;
+//#endregion
+//#region src/core/store.d.ts
+declare const PlayerContext: import("react").Context<Provider | null>;
+declare function useMediaSelector<T>(selector: (s: MediaState) => T, isEqual?: (a: T, b: T) => boolean): T;
+declare function usePlayer(): {
+  state: MediaState;
+  actions: PlayerActions;
+};
+declare function usePlayerActions(): PlayerActions;
+//#endregion
+//#region src/ui/player.d.ts
+declare function useWrapperRef(): RefObject<HTMLDivElement | null> | null;
+declare function useIsCompact(): boolean;
+type PlayerProps = {
+  provider: Provider;
+  accentColor?: string;
+  theme?: Record<string, string>;
+  className?: string;
+  children?: ReactNode;
+};
+declare function Player({
+  provider,
+  accentColor,
+  theme,
+  className,
+  children
+}: PlayerProps): import("react").JSX.Element;
+declare namespace Player {
+  var Overlay: ({
+    children
+  }: {
+    children: ReactNode;
+  }) => import("react").JSX.Element;
+}
+declare function useControlsVisible(): boolean;
+//#endregion
+//#region src/ui/scrubber.d.ts
+declare function Scrubber(): import("react").JSX.Element;
+//#endregion
+//#region src/ui/idle-overlay.d.ts
+declare function IdleOverlay(): import("react").JSX.Element | null;
+//#endregion
+//#region src/ui/captions.d.ts
+declare function Captions(): import("react").JSX.Element | null;
+//#endregion
+//#region src/ui/buttons.d.ts
+declare function PlayPauseButton(): import("react").JSX.Element;
+declare function SkipBackButton(): import("react").JSX.Element;
+declare function SkipForwardButton(): import("react").JSX.Element;
+declare function VolumeControl(): import("react").JSX.Element;
+declare function PipButton(): import("react").JSX.Element | null;
+declare function FullscreenButton(): import("react").JSX.Element | null;
+//#endregion
+//#region src/ui/control-bar.d.ts
+declare function ControlBar(): import("react").JSX.Element;
+//#endregion
+export { type Capabilities, Captions, ControlBar, FullscreenButton, IdleOverlay, type MediaError, type MediaState, PipButton, PlayPauseButton, Player, type PlayerActions, PlayerContext, type Provider, type QualityLevel, Scrubber, SkipBackButton, SkipForwardButton, type SourceOptions, type TextTrackInfo, VolumeControl, formatTime, useControlsVisible, useIsCompact, useMediaSelector, usePlayer, usePlayerActions, useWrapperRef };

package/dist/index.js

@@ -0,0 +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";
+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

@@ -0,0 +1,38 @@
+import { a as Provider } from "./types-D0bLitH2.js";
+import { ReactNode } from "react";
+//#region src/mux/provider.d.ts
+type MuxProviderOptions = {
+  playbackId: string;
+  tokens?: {
+    playback?: string;
+    thumbnail?: string;
+    storyboard?: string;
+  };
+  metadata?: {
+    videoId?: string;
+    videoTitle?: string;
+    viewerUserId?: string;
+  };
+  envKey?: string;
+  poster?: string;
+  autoPlay?: boolean;
+  defaultRate?: number;
+};
+declare function createMuxProvider(opts: MuxProviderOptions): Provider;
+//#endregion
+//#region src/mux/mux-player.d.ts
+type MuxPlayerProps = MuxProviderOptions & {
+  accentColor?: string;
+  theme?: Record<string, string>;
+  className?: string;
+  children?: ReactNode;
+};
+declare function MuxPlayer({
+  accentColor,
+  theme,
+  className,
+  children,
+  ...opts
+}: MuxPlayerProps): import("react").JSX.Element;
+//#endregion
+export { MuxPlayer, type MuxPlayerProps, type MuxProviderOptions, createMuxProvider };

package/dist/mux.js

@@ -0,0 +1,439 @@
+import { c as Captions, d as Player, l as IdleOverlay, t as ControlBar } from "./control-bar-DWzMIb23.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@mux/mux-video";
+//#region src/core/fake-provider.ts
+const DEFAULT_CAPS = {
+	canSetQuality: true,
+	hasStoryboard: false,
+	canPiP: true,
+	canFullscreen: true,
+	canSetRate: true,
+	hasTextTracks: false
+};
+function defaultState() {
+	return {
+		paused: true,
+		currentTime: 0,
+		duration: 0,
+		buffered: [],
+		rate: 1,
+		volume: 1,
+		muted: false,
+		readyState: 0,
+		seeking: false,
+		ended: false,
+		error: null,
+		qualities: [],
+		activeQualityId: "auto",
+		videoHeight: 0,
+		textTracks: [],
+		activeTextTrackId: null,
+		activeCueText: "",
+		fullscreen: false,
+		pip: false,
+		storyboard: null,
+		capabilities: { ...DEFAULT_CAPS }
+	};
+}
+//#endregion
+//#region src/mux/urls.ts
+const IMAGE_HOST = "https://image.mux.com";
+function buildImageUrl(playbackId, kind, token, ext = kind === "storyboard" ? "vtt" : "webp") {
+	const base = `${IMAGE_HOST}/${playbackId}/${kind}.${ext}`;
+	return token ? `${base}?token=${token}` : base;
+}
+function detectIOS(ua) {
+	return /iPhone|iPad|iPod/.test(ua);
+}
+//#endregion
+//#region src/util/captions.ts
+function joinCues(cues) {
+	if (!cues || cues.length === 0) return "";
+	const parts = [];
+	for (let i = 0; i < cues.length; i++) {
+		const c = cues[i];
+		if (c && typeof c.text === "string") parts.push(c.text);
+	}
+	return parts.join("\n").replace(/<[^>]+>/g, "").replace(/[^\S\n]+/g, " ").replace(/ *\n */g, "\n").replace(/\n{2,}/g, "\n").trim();
+}
+function activeCueText(tracks, now) {
+	if (!tracks) return "";
+	for (let i = 0; i < tracks.length; i++) {
+		const t = tracks[i];
+		if (!t) continue;
+		if (t.kind !== "subtitles" && t.kind !== "captions") continue;
+		if (t.mode === "disabled") continue;
+		const active = joinCues(t.activeCues);
+		if (active) return active;
+		const all = t.cues;
+		if (all && all.length) {
+			const hits = [];
+			for (let j = 0; j < all.length; j++) {
+				const c = all[j];
+				if (c && c.startTime <= now && now < c.endTime) hits.push(c);
+			}
+			const text = joinCues(hits);
+			if (text) return text;
+		}
+	}
+	return "";
+}
+//#endregion
+//#region src/mux/provider.ts
+function createMuxProvider(opts) {
+	const ios = typeof navigator !== "undefined" && detectIOS(navigator.userAgent);
+	let el = null;
+	let renditions = null;
+	let renditionsBound = false;
+	let state = {
+		...defaultState(),
+		rate: opts.defaultRate ?? 1,
+		storyboard: { vttUrl: buildImageUrl(opts.playbackId, "storyboard", opts.tokens?.storyboard) },
+		capabilities: {
+			canSetQuality: !ios,
+			hasStoryboard: true,
+			canPiP: typeof document !== "undefined" && "pictureInPictureEnabled" in document,
+			canFullscreen: true,
+			canSetRate: true,
+			hasTextTracks: true
+		}
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = () => listeners.forEach((l) => l());
+	const patch = (p) => {
+		state = {
+			...state,
+			...p
+		};
+		emit();
+	};
+	const onFullscreenChange = () => patch({ fullscreen: document.fullscreenElement != null });
+	const onWebkitBeginFullscreen = () => patch({ fullscreen: true });
+	const onWebkitEndFullscreen = () => patch({ fullscreen: false });
+	const onEnterPip = () => patch({ pip: true });
+	const onLeavePip = () => patch({ pip: false });
+	let activeTrack = null;
+	const readCueText = () => ios ? "" : activeCueText(el?.textTracks, el?.currentTime ?? 0);
+	const modeForActiveTrack = (t) => ios ? "showing" : t.cues && t.cues.length > 0 ? "hidden" : "showing";
+	const onCueChange = () => {
+		applyTextTrackModes();
+		patch({ activeCueText: readCueText() });
+	};
+	const bindActiveTrack = (track) => {
+		if (activeTrack) activeTrack.removeEventListener("cuechange", onCueChange);
+		activeTrack = track;
+		if (activeTrack) activeTrack.addEventListener("cuechange", onCueChange);
+		patch({ activeCueText: readCueText() });
+	};
+	const applyTextTrackModes = () => {
+		const tt = el?.textTracks;
+		if (!tt) return;
+		const id = state.activeTextTrackId;
+		let next = null;
+		for (let i = 0; i < tt.length; i++) {
+			const t = tt[i];
+			if (!t) continue;
+			if (t.kind !== "subtitles" && t.kind !== "captions") continue;
+			if (id != null && (t.id || String(i)) === id) {
+				const mode = modeForActiveTrack(t);
+				if (t.mode !== mode) t.mode = mode;
+				next = t;
+			} else if (t.mode !== "disabled") t.mode = "disabled";
+		}
+		if (next !== activeTrack) bindActiveTrack(next);
+	};
+	const onTextTracksChanged = () => {
+		applyTextTrackModes();
+		patch({
+			textTracks: readTextTracks(),
+			activeCueText: readCueText()
+		});
+	};
+	const readQualities = () => {
+		const r = el?.videoRenditions;
+		if (!r) return [];
+		const out = [];
+		for (let i = 0; i < r.length; i++) {
+			const item = r[i];
+			if (!item) continue;
+			out.push({
+				id: item.id,
+				height: item.height,
+				bitrate: item.bitrate,
+				selected: item.selected
+			});
+		}
+		return out;
+	};
+	const readTextTracks = () => {
+		const tt = el?.textTracks;
+		if (!tt) return [];
+		const out = [];
+		for (let i = 0; i < tt.length; i++) {
+			const t = tt[i];
+			if (!t) continue;
+			if (t.kind !== "subtitles" && t.kind !== "captions") continue;
+			out.push({
+				id: t.id || String(i),
+				kind: t.kind,
+				label: t.label,
+				lang: t.language,
+				mode: t.mode
+			});
+		}
+		return out;
+	};
+	const bindRenditions = () => {
+		if (renditionsBound || !el?.videoRenditions) return;
+		renditions = el.videoRenditions;
+		renditions.addEventListener("change", syncFromEl);
+		renditionsBound = true;
+	};
+	const syncFromEl = () => {
+		if (!el) return;
+		bindRenditions();
+		applyTextTrackModes();
+		const ranges = [];
+		for (let i = 0; i < el.buffered.length; i++) ranges.push([el.buffered.start(i), el.buffered.end(i)]);
+		patch({
+			paused: el.paused,
+			currentTime: el.currentTime,
+			duration: el.duration || 0,
+			buffered: ranges,
+			rate: el.playbackRate,
+			volume: el.volume,
+			muted: el.muted,
+			readyState: el.readyState,
+			seeking: el.seeking,
+			ended: el.ended,
+			error: el.error ? {
+				code: el.error.code,
+				message: el.error.message
+			} : null,
+			qualities: readQualities(),
+			textTracks: readTextTracks(),
+			videoHeight: el.videoHeight || 0,
+			activeCueText: readCueText()
+		});
+		if (typeof navigator !== "undefined" && "mediaSession" in navigator) navigator.mediaSession.playbackState = el.paused ? "paused" : "playing";
+	};
+	const MEDIA_SESSION_ACTIONS = [
+		"play",
+		"pause",
+		"seekbackward",
+		"seekforward",
+		"seekto"
+	];
+	const setupMediaSession = () => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		const ms = navigator.mediaSession;
+		const set = (a, h) => {
+			try {
+				ms.setActionHandler(a, h);
+			} catch {}
+		};
+		set("play", () => actions.play());
+		set("pause", () => actions.pause());
+		set("seekbackward", (d) => actions.seek(Math.max(0, state.currentTime - (d.seekOffset || 10))));
+		set("seekforward", (d) => actions.seek(state.currentTime + (d.seekOffset || 10)));
+		set("seekto", (d) => {
+			if (typeof d.seekTime === "number") actions.seek(d.seekTime);
+		});
+		if (typeof MediaMetadata !== "undefined") try {
+			ms.metadata = new MediaMetadata({ title: opts.metadata?.videoTitle ?? "Video" });
+		} catch {}
+	};
+	const teardownMediaSession = () => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		for (const a of MEDIA_SESSION_ACTIONS) try {
+			navigator.mediaSession.setActionHandler(a, null);
+		} catch {}
+	};
+	const MEDIA_EVENTS = [
+		"play",
+		"pause",
+		"timeupdate",
+		"durationchange",
+		"progress",
+		"volumechange",
+		"ratechange",
+		"seeking",
+		"seeked",
+		"ended",
+		"loadedmetadata",
+		"canplay",
+		"waiting",
+		"error"
+	];
+	const actions = {
+		play: () => {
+			el?.play?.();
+		},
+		pause: () => el?.pause(),
+		seek: (t) => {
+			if (el) el.currentTime = t;
+		},
+		setRate: (r) => {
+			if (el) el.playbackRate = r;
+		},
+		setVolume: (v) => {
+			if (el) el.volume = Math.min(1, Math.max(0, v));
+		},
+		setMuted: (m) => {
+			if (el) el.muted = m;
+		},
+		setQuality: (id) => {
+			const r = el?.videoRenditions;
+			if (!r) return;
+			if (id === "auto") {
+				r.selectedIndex = -1;
+				patch({ activeQualityId: "auto" });
+				return;
+			}
+			for (let i = 0; i < r.length; i++) {
+				const item = r[i];
+				if (item && item.id === id) {
+					item.selected = true;
+					r.selectedIndex = i;
+				}
+			}
+			patch({ activeQualityId: id });
+		},
+		setTextTrack: (id) => {
+			if (!el?.textTracks) return;
+			patch({ activeTextTrackId: id });
+			applyTextTrackModes();
+		},
+		enterFullscreen: (wrapper) => {
+			if (wrapper.requestFullscreen) wrapper.requestFullscreen();
+			else el?.webkitEnterFullscreen?.();
+		},
+		exitFullscreen: () => {
+			if (document.fullscreenElement) document.exitFullscreen?.();
+			else el?.webkitExitFullscreen?.();
+		},
+		enterPiP: () => {
+			el?.requestPictureInPicture?.();
+		},
+		exitPiP: () => {
+			document.exitPictureInPicture?.();
+		}
+	};
+	return {
+		mount(container) {
+			el = document.createElement("mux-video");
+			el.playbackId = opts.tokens?.playback ? `${opts.playbackId}?token=${opts.tokens.playback}` : opts.playbackId;
+			el.setAttribute("crossorigin", "");
+			el.setAttribute("playsinline", "");
+			el.playsInline = true;
+			el.poster = opts.poster ?? buildImageUrl(opts.playbackId, "thumbnail", opts.tokens?.thumbnail);
+			if (opts.autoPlay) el.autoplay = true;
+			el.playbackRate = state.rate;
+			if (opts.envKey) el.envKey = opts.envKey;
+			if (opts.metadata) el.metadata = {
+				video_id: opts.metadata.videoId,
+				video_title: opts.metadata.videoTitle,
+				viewer_user_id: opts.metadata.viewerUserId
+			};
+			for (const ev of MEDIA_EVENTS) el.addEventListener(ev, syncFromEl);
+			document.addEventListener("fullscreenchange", onFullscreenChange);
+			el.addEventListener("webkitbeginfullscreen", onWebkitBeginFullscreen);
+			el.addEventListener("webkitendfullscreen", onWebkitEndFullscreen);
+			el.addEventListener("enterpictureinpicture", onEnterPip);
+			el.addEventListener("leavepictureinpicture", onLeavePip);
+			container.appendChild(el);
+			el.textTracks?.addEventListener("addtrack", onTextTracksChanged);
+			el.textTracks?.addEventListener("removetrack", onTextTracksChanged);
+			el.textTracks?.addEventListener("change", onTextTracksChanged);
+			setupMediaSession();
+		},
+		swapSource(opts) {
+			if (!el) return;
+			if (opts.playbackId != null) el.playbackId = opts.tokens?.playback ? `${opts.playbackId}?token=${opts.tokens.playback}` : opts.playbackId;
+			if (opts.poster != null) el.poster = opts.poster;
+			else if (opts.playbackId != null) el.poster = buildImageUrl(opts.playbackId, "thumbnail", opts.tokens?.thumbnail);
+			if (opts.metadata) el.metadata = {
+				video_id: opts.metadata.videoId,
+				video_title: opts.metadata.videoTitle,
+				viewer_user_id: opts.metadata.viewerUserId
+			};
+			patch({
+				currentTime: 0,
+				duration: 0,
+				ended: false,
+				seeking: false,
+				error: null,
+				storyboard: opts.playbackId != null ? { vttUrl: buildImageUrl(opts.playbackId, "storyboard", opts.tokens?.storyboard) } : state.storyboard
+			});
+		},
+		getState: () => state,
+		subscribe: (l) => {
+			listeners.add(l);
+			return () => listeners.delete(l);
+		},
+		actions,
+		destroy() {
+			document.removeEventListener("fullscreenchange", onFullscreenChange);
+			teardownMediaSession();
+			if (activeTrack) activeTrack.removeEventListener("cuechange", onCueChange);
+			activeTrack = null;
+			if (renditionsBound) renditions?.removeEventListener("change", syncFromEl);
+			renditions = null;
+			renditionsBound = false;
+			if (el) {
+				for (const ev of MEDIA_EVENTS) el.removeEventListener(ev, syncFromEl);
+				el.removeEventListener("webkitbeginfullscreen", onWebkitBeginFullscreen);
+				el.removeEventListener("webkitendfullscreen", onWebkitEndFullscreen);
+				el.removeEventListener("enterpictureinpicture", onEnterPip);
+				el.removeEventListener("leavepictureinpicture", onLeavePip);
+				el.textTracks?.removeEventListener("addtrack", onTextTracksChanged);
+				el.textTracks?.removeEventListener("removetrack", onTextTracksChanged);
+				el.textTracks?.removeEventListener("change", onTextTracksChanged);
+				el.remove();
+			}
+			el = null;
+			listeners.clear();
+		}
+	};
+}
+//#endregion
+//#region src/mux/mux-player.tsx
+function MuxPlayer({ accentColor, theme, className, children, ...opts }) {
+	const providerRef = useRef(null);
+	if (providerRef.current === null) providerRef.current = createMuxProvider(opts);
+	const provider = providerRef.current;
+	const mountedRef = useRef(false);
+	useEffect(() => {
+		if (!mountedRef.current) {
+			mountedRef.current = true;
+			return;
+		}
+		provider.swapSource?.({
+			playbackId: opts.playbackId,
+			poster: opts.poster,
+			tokens: opts.tokens,
+			metadata: opts.metadata
+		});
+	}, [
+		opts.playbackId,
+		opts.tokens?.playback,
+		opts.tokens?.thumbnail,
+		opts.tokens?.storyboard,
+		opts.poster
+	]);
+	return /* @__PURE__ */ jsxs(Player, {
+		provider,
+		accentColor,
+		theme,
+		className,
+		children: [
+			/* @__PURE__ */ jsx(IdleOverlay, {}),
+			/* @__PURE__ */ jsx(Captions, {}),
+			/* @__PURE__ */ jsx(ControlBar, {}),
+			children
+		]
+	});
+}
+//#endregion
+export { MuxPlayer, createMuxProvider };