bobinejs 0.0.0-stage → 0.2.0

package/dist/hls.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Attaches a source the element can't play natively (HLS, DASH, MSE).
+ * Return a cleanup function to tear the adapter down when `src` changes.
+ */
+type MediaSourceLoader = (media: HTMLMediaElement, src: string) => void | (() => void);
+
+/**
+ * Plays `.m3u8` streams with hls.js, loaded on demand so it never lands in
+ * the main bundle. Native playback is only the fallback for browsers without
+ * Media Source Extensions: Chrome 142 and later report native HLS support,
+ * but cannot parse common MPEG-TS streams, so `canPlayType` is not a safe
+ * test.
+ */
+declare const hlsLoader: MediaSourceLoader;
+
+export { hlsLoader };

package/dist/hls.js

@@ -0,0 +1,39 @@
+// ../../lib/media-hls.ts
+var hasMediaSource = () => typeof window !== "undefined" && ("MediaSource" in window || "ManagedMediaSource" in window);
+var hlsLoader = (media, src) => {
+  const playNatively = () => {
+    media.src = src;
+    return () => {
+      media.removeAttribute("src");
+      media.load();
+    };
+  };
+  if (!/\.m3u8($|\?)/i.test(src) || !hasMediaSource()) return playNatively();
+  let disposed = false;
+  let destroy;
+  import('hls.js').then(({ default: Hls }) => {
+    if (disposed) return;
+    if (!Hls.isSupported()) {
+      destroy = playNatively();
+      return;
+    }
+    const hls = new Hls({ enableWorker: true });
+    hls.on(Hls.Events.ERROR, (_, data) => {
+      if (!data.fatal) return;
+      if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad();
+      else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError();
+      else hls.destroy();
+    });
+    hls.loadSource(src);
+    hls.attachMedia(media);
+    destroy = () => hls.destroy();
+  });
+  return () => {
+    disposed = true;
+    destroy?.();
+  };
+};
+
+export { hlsLoader };
+//# sourceMappingURL=hls.js.map
+//# sourceMappingURL=hls.js.map

package/dist/hls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/media-hls.ts"],"names":[],"mappings":";AAMA,IAAM,iBAAiB,MACrB,OAAO,WAAW,WAAA,KAAgB,aAAA,IAAiB,UAAU,oBAAA,IAAwB,MAAA,CAAA;AAShF,IAAM,SAAA,GAA+B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC1D,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,KAAA,CAAM,GAAA,GAAM,GAAA;AACZ,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,CAAM,gBAAgB,KAAK,CAAA;AAC3B,MAAA,KAAA,CAAM,IAAA,EAAK;AAAA,IACb,CAAA;AAAA,EACF,CAAA;AAEA,EAAA,IAAI,CAAC,gBAAgB,IAAA,CAAK,GAAG,KAAK,CAAC,cAAA,EAAe,EAAG,OAAO,YAAA,EAAa;AAEzE,EAAA,IAAI,QAAA,GAAW,KAAA;AACf,EAAA,IAAI,OAAA;AAEJ,EAAA,OAAO,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,EAAE,OAAA,EAAS,KAAI,KAAM;AAC1C,IAAA,IAAI,QAAA,EAAU;AACd,IAAA,IAAI,CAAC,GAAA,CAAI,WAAA,EAAY,EAAG;AACtB,MAAA,OAAA,GAAU,YAAA,EAAa;AACvB,MAAA;AAAA,IACF;AACA,IAAA,MAAM,MAAM,IAAI,GAAA,CAAI,EAAE,YAAA,EAAc,MAAM,CAAA;AAC1C,IAAA,GAAA,CAAI,GAAG,GAAA,CAAI,MAAA,CAAO,KAAA,EAAO,CAAC,GAAG,IAAA,KAAS;AACpC,MAAA,IAAI,CAAC,KAAK,KAAA,EAAO;AACjB,MAAA,IAAI,KAAK,IAAA,KAAS,GAAA,CAAI,UAAA,CAAW,aAAA,MAAmB,SAAA,EAAU;AAAA,WAAA,IACrD,KAAK,IAAA,KAAS,GAAA,CAAI,UAAA,CAAW,WAAA,MAAiB,iBAAA,EAAkB;AAAA,eAChE,OAAA,EAAQ;AAAA,IACnB,CAAC,CAAA;AACD,IAAA,GAAA,CAAI,WAAW,GAAG,CAAA;AAClB,IAAA,GAAA,CAAI,YAAY,KAAK,CAAA;AACrB,IAAA,OAAA,GAAU,MAAM,IAAI,OAAA,EAAQ;AAAA,EAC9B,CAAC,CAAA;AAED,EAAA,OAAO,MAAM;AACX,IAAA,QAAA,GAAW,IAAA;AACX,IAAA,OAAA,IAAU;AAAA,EACZ,CAAA;AACF","file":"hls.js","sourcesContent":["import type { MediaSourceLoader } from \"@/components/ui/media\"\r\n\r\n/**\r\n * Media Source Extensions, which hls.js needs. iPhones before iOS 17.1 have\r\n * neither API, and they are the browsers that must play HLS natively.\r\n */\r\nconst hasMediaSource = () =>\r\n  typeof window !== \"undefined\" && (\"MediaSource\" in window || \"ManagedMediaSource\" in window)\r\n\r\n/**\r\n * Plays `.m3u8` streams with hls.js, loaded on demand so it never lands in\r\n * the main bundle. Native playback is only the fallback for browsers without\r\n * Media Source Extensions: Chrome 142 and later report native HLS support,\r\n * but cannot parse common MPEG-TS streams, so `canPlayType` is not a safe\r\n * test.\r\n */\r\nexport const hlsLoader: MediaSourceLoader = (media, src) => {\r\n  const playNatively = () => {\r\n    media.src = src\r\n    return () => {\r\n      media.removeAttribute(\"src\")\r\n      media.load()\r\n    }\r\n  }\r\n\r\n  if (!/\\.m3u8($|\\?)/i.test(src) || !hasMediaSource()) return playNatively()\r\n\r\n  let disposed = false\r\n  let destroy: (() => void) | undefined\r\n\r\n  import(\"hls.js\").then(({ default: Hls }) => {\r\n    if (disposed) return\r\n    if (!Hls.isSupported()) {\r\n      destroy = playNatively()\r\n      return\r\n    }\r\n    const hls = new Hls({ enableWorker: true })\r\n    hls.on(Hls.Events.ERROR, (_, data) => {\r\n      if (!data.fatal) return\r\n      if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad()\r\n      else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError()\r\n      else hls.destroy()\r\n    })\r\n    hls.loadSource(src)\r\n    hls.attachMedia(media)\r\n    destroy = () => hls.destroy()\r\n  })\r\n\r\n  return () => {\r\n    disposed = true\r\n    destroy?.()\r\n  }\r\n}\r\n"]}

package/dist/index.d.ts

@@ -0,0 +1,289 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type MediaTextTrack = {
+    label: string;
+    language: string;
+    kind: "captions" | "subtitles";
+};
+type MediaInfo = {
+    title?: string;
+    artist?: string;
+    album?: string;
+    artwork?: {
+        src: string;
+        sizes?: string;
+        type?: string;
+    }[];
+};
+type MediaState = {
+    paused: boolean;
+    ended: boolean;
+    started: boolean;
+    waiting: boolean;
+    currentTime: number;
+    duration: number;
+    bufferedEnd: number;
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    fullscreen: boolean;
+    pictureInPicture: boolean;
+    error: MediaError | null;
+    /** False while the element has no source to play. */
+    hasSource: boolean;
+    /** Caption and subtitle tracks, in document order. */
+    textTracks: MediaTextTrack[];
+    /** Index into `textTracks`, or -1 when captions are off. */
+    textTrack: number;
+    /** Text of the cues active right now, one entry per cue. */
+    cues: string[];
+};
+type MediaStoreOptions = {
+    /** localStorage key used to remember volume, mute and speed. Off by default. */
+    persistKey?: string;
+};
+type Listener = () => void;
+/**
+ * Framework-agnostic store over any HTMLMediaElement. React bindings,
+ * web components, or anything else can subscribe to it.
+ */
+declare function createMediaStore({ persistKey }?: MediaStoreOptions): {
+    play: () => Promise<void>;
+    pause: () => void | undefined;
+    toggle: () => void | Promise<void>;
+    seek: (time: number) => void;
+    seekBy: (delta: number) => void;
+    /** Jump to a fraction (0–1) of the duration. */
+    seekToRatio: (ratio: number) => void;
+    setVolume: (volume: number) => void;
+    toggleMute: () => void;
+    setPlaybackRate: (rate: number) => void;
+    /** Select a caption track by index, or -1 to turn captions off. */
+    setTextTrack: (index: number) => void;
+    toggleCaptions: () => void;
+    /** Reload the current source after an error. */
+    retry: () => void;
+    setMetadata: (next: MediaInfo | null) => void;
+    toggleFullscreen: () => Promise<void>;
+    togglePictureInPicture: () => Promise<void>;
+    getState: () => MediaState;
+    getServerState: () => MediaState;
+    getMedia: () => HTMLMediaElement | null;
+    subscribe: (listener: Listener) => () => boolean;
+    attach: (el: HTMLMediaElement | null) => void;
+    setContainer: (el: HTMLElement | null) => void;
+};
+type MediaStore = ReturnType<typeof createMediaStore>;
+/**
+ * `m:ss`, or `h:mm:ss` from one hour. Pass the duration as `reference` so
+ * every time in a player uses the same fields: `0:00:05` beside `10:00:01`,
+ * and the label does not widen when playback passes an hour.
+ */
+declare function formatTime(seconds: number, reference?: number): string;
+/** Human-readable message for a MediaError code. */
+declare function describeMediaError(error: MediaError | null): "Playback was aborted." | "A network error stopped the download." | "This media could not be decoded." | "This media couldn't be loaded." | "Something went wrong during playback.";
+
+declare function useMediaStore(): {
+    play: () => Promise<void>;
+    pause: () => void | undefined;
+    toggle: () => void | Promise<void>;
+    seek: (time: number) => void;
+    seekBy: (delta: number) => void;
+    seekToRatio: (ratio: number) => void;
+    setVolume: (volume: number) => void;
+    toggleMute: () => void;
+    setPlaybackRate: (rate: number) => void;
+    setTextTrack: (index: number) => void;
+    toggleCaptions: () => void;
+    retry: () => void;
+    setMetadata: (next: MediaInfo | null) => void;
+    toggleFullscreen: () => Promise<void>;
+    togglePictureInPicture: () => Promise<void>;
+    getState: () => MediaState;
+    getServerState: () => MediaState;
+    getMedia: () => HTMLMediaElement | null;
+    subscribe: (listener: () => void) => () => boolean;
+    attach: (el: HTMLMediaElement | null) => void;
+    setContainer: (el: HTMLElement | null) => void;
+};
+declare function useMedia<T>(selector: (state: MediaState) => T): T;
+type MediaRootProps = React.ComponentProps<"div"> & {
+    /** Milliseconds of pointer inactivity before controls hide during playback. */
+    idleTimeout?: number;
+    /** Remember volume, mute and speed in localStorage under this key. */
+    persistKey?: string;
+    /** Title, artist and artwork for OS media controls (Media Session API). */
+    metadata?: MediaInfo;
+    /** Enable keyboard shortcuts while focus is inside the player. */
+    hotkeys?: boolean;
+    /** Small labels over the buttons on hover and keyboard focus, with their shortcut. */
+    tooltips?: boolean;
+};
+declare function MediaRoot({ className, idleTimeout, persistKey, metadata, hotkeys, tooltips, onPointerMove, onPointerDown, onPointerLeave, onKeyDown, ref, ...props }: MediaRootProps): react_jsx_runtime.JSX.Element;
+/**
+ * Attaches a source the element can't play natively (HLS, DASH, MSE).
+ * Return a cleanup function to tear the adapter down when `src` changes.
+ */
+type MediaSourceLoader = (media: HTMLMediaElement, src: string) => void | (() => void);
+type MediaElementProps<T> = T & {
+    /** Custom source adapter, e.g. `hlsLoader` from `@/lib/media-hls`. */
+    loader?: MediaSourceLoader;
+};
+type MediaVideoProps = MediaElementProps<React.ComponentProps<"video">>;
+declare function MediaVideo({ className, ref, src, loader, ...props }: MediaVideoProps): react_jsx_runtime.JSX.Element;
+type MediaAudioProps = MediaElementProps<React.ComponentProps<"audio">>;
+declare function MediaAudio({ ref, src, loader, ...props }: MediaAudioProps): react_jsx_runtime.JSX.Element;
+type MediaTooltipAlign = "start" | "center" | "end";
+type MediaButtonProps = React.ComponentProps<"button"> & {
+    /** Tooltip text, shown when the root has `tooltips`. `false` hides it. */
+    tooltip?: React.ReactNode;
+    /** Shortcut shown beside the tooltip when the root has `hotkeys`. */
+    shortcut?: string;
+    /** Pin the tooltip to an edge for buttons at either end of a bar. */
+    tooltipAlign?: MediaTooltipAlign;
+};
+declare function MediaButton({ className, type, tooltip, shortcut, tooltipAlign, children, ...props }: MediaButtonProps): react_jsx_runtime.JSX.Element;
+declare function MediaPlayButton({ onClick, ...props }: MediaButtonProps): react_jsx_runtime.JSX.Element;
+declare function MediaMuteButton({ onClick, ...props }: MediaButtonProps): react_jsx_runtime.JSX.Element;
+declare function MediaFullscreenButton({ onClick, ...props }: MediaButtonProps): react_jsx_runtime.JSX.Element;
+declare function MediaPictureInPictureButton({ onClick, ...props }: MediaButtonProps): react_jsx_runtime.JSX.Element | null;
+type MediaPlaybackRateButtonProps = MediaButtonProps & {
+    /** Speeds a click cycles through, in order. */
+    rates?: number[];
+};
+declare function MediaPlaybackRateButton({ rates, className, style, onClick, ...props }: MediaPlaybackRateButtonProps): react_jsx_runtime.JSX.Element;
+/**
+ * Bar that reveals while the pointer is active, playback is paused,
+ * or keyboard focus is inside the player.
+ */
+type MediaControlsProps = React.ComponentProps<"div">;
+declare function MediaControls({ className, ...props }: MediaControlsProps): react_jsx_runtime.JSX.Element;
+type MediaSurfaceProps = React.ComponentProps<"button"> & {
+    /** Seconds a double-tap on either half seeks by. 0 disables it. */
+    doubleTapSeek?: number;
+    /** Double-click with a mouse toggles fullscreen. */
+    doubleClickFullscreen?: boolean;
+    /** Classes for the "±10s" bubble shown after a double-tap seek. */
+    indicatorClassName?: string;
+};
+/**
+ * Full-bleed click target under the controls. Click toggles playback; on touch,
+ * the first tap reveals controls and a double-tap on either half seeks.
+ */
+declare function MediaSurface({ className, doubleTapSeek, doubleClickFullscreen, indicatorClassName, onClick, onDoubleClick, onPointerDown, children, ...props }: MediaSurfaceProps): react_jsx_runtime.JSX.Element;
+type MediaSeekProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** Seconds moved per arrow key press. */
+    step?: number;
+    /** Show a time tooltip while hovering. */
+    preview?: boolean;
+    previewClassName?: string;
+};
+declare function MediaSeek({ className, step, preview, previewClassName, ...props }: MediaSeekProps): react_jsx_runtime.JSX.Element;
+type MediaVolumeProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** "vertical" fills from the bottom, for a slider in a popover. */
+    orientation?: "horizontal" | "vertical";
+};
+declare function MediaVolume({ orientation, className, ...props }: MediaVolumeProps): react_jsx_runtime.JSX.Element;
+type MediaTimeProps = React.ComponentProps<"span"> & {
+    type?: "current" | "duration" | "remaining";
+    /** Click to show remaining time and back. "remaining" swaps with elapsed. */
+    toggle?: boolean;
+};
+declare function MediaTime({ type, toggle, className, ...props }: MediaTimeProps): react_jsx_runtime.JSX.Element;
+type MediaLoadingProps = React.ComponentProps<"span">;
+declare function MediaLoading({ className, ...props }: MediaLoadingProps): react_jsx_runtime.JSX.Element;
+/**
+ * Renders active caption cues. Native rendering is disabled so cues can be
+ * styled and can slide above the controls when they appear.
+ */
+type MediaCaptionsProps = React.ComponentProps<"div">;
+declare function MediaCaptions({ className, ...props }: MediaCaptionsProps): react_jsx_runtime.JSX.Element | null;
+declare function MediaCaptionsButton({ onClick, ...props }: MediaButtonProps): react_jsx_runtime.JSX.Element | null;
+type MediaSettingsProps = Omit<React.ComponentProps<"div">, "children"> & {
+    rates?: number[];
+    /** Classes for the floating panel. */
+    panelClassName?: string;
+};
+/**
+ * Popover with playback speed and caption track choices. Arrow keys move
+ * between options; Escape or a click outside closes it.
+ */
+declare function MediaSettings({ rates, className, panelClassName, ...props }: MediaSettingsProps): react_jsx_runtime.JSX.Element;
+type MediaErrorMessageProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** Override the default message for a given MediaError. */
+    message?: (error: MediaError) => React.ReactNode;
+};
+declare function MediaErrorMessage({ className, message, ...props }: MediaErrorMessageProps): react_jsx_runtime.JSX.Element | null;
+
+type VideoTrack = {
+    src: string;
+    label: string;
+    srcLang: string;
+    kind?: "captions" | "subtitles";
+    default?: boolean;
+};
+type VideoPlayerProps = Omit<React.ComponentProps<"video">, "controls"> & {
+    /** Classes for the outer frame. `className` targets the <video> element. */
+    frameClassName?: string;
+    /** WebVTT caption or subtitle files. */
+    tracks?: VideoTrack[];
+    /** Adapter for sources the browser can't play natively, e.g. HLS. */
+    loader?: MediaSourceLoader;
+    /** Shown in OS media controls and lock screens. */
+    metadata?: MediaInfo;
+    /** Remember volume, mute and speed under this localStorage key. */
+    persistKey?: string;
+    /** Small labels with shortcuts over the controls on hover and focus. On by default. */
+    tooltips?: boolean;
+};
+declare function VideoPlayer({ className, frameClassName, tracks, loader, metadata, persistKey, tooltips, children, crossOrigin, ...props }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
+
+type AudioPlayerProps = Omit<React.ComponentProps<"audio">, "controls" | "title"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Cover image shown beside the controls and in OS media controls. */
+    artwork?: string;
+    /** Show a playback speed toggle. Useful for podcasts and voice notes. */
+    showSpeed?: boolean;
+    /** Small labels with shortcuts over the controls on hover and focus. On by default. */
+    tooltips?: boolean;
+    /** Classes for the outer frame. `className` targets the <audio> element. */
+    frameClassName?: string;
+    /** Adapter for sources the browser can't play natively, e.g. HLS. */
+    loader?: MediaSourceLoader;
+    /** Overrides metadata derived from `title`, `description` and `artwork`. */
+    metadata?: MediaInfo;
+    /** Remember volume, mute and speed under this localStorage key. */
+    persistKey?: string;
+};
+declare function AudioPlayer({ title, description, artwork, showSpeed, tooltips, className, frameClassName, loader, metadata, persistKey, ...props }: AudioPlayerProps): react_jsx_runtime.JSX.Element;
+
+type MediaIconProps = React.ComponentProps<"svg">;
+/**
+ * Optically centred: the filled area's centroid, not the bounding box, sits
+ * on the viewBox centre (x = 12), measured from the rendered shape. A
+ * box-centred triangle looks shifted right, because its weight is in the flat
+ * left side.
+ */
+declare function PlayIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+declare function PauseIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+declare function VolumeIcon({ muted, ...props }: MediaIconProps & {
+    muted?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function EnterFullscreenIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+declare function ExitFullscreenIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+declare function PictureInPictureIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+/** Outlined when off; filled with knocked-out letters when on. */
+declare function CaptionsIcon({ active, ...props }: MediaIconProps & {
+    active?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SettingsIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+declare function RetryIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+declare function CheckIcon(props: MediaIconProps): react_jsx_runtime.JSX.Element;
+declare function SeekIcon({ direction, ...props }: MediaIconProps & {
+    direction: "back" | "forward";
+}): react_jsx_runtime.JSX.Element;
+
+export { AudioPlayer, CaptionsIcon, CheckIcon, EnterFullscreenIcon, ExitFullscreenIcon, MediaAudio, MediaButton, MediaCaptions, MediaCaptionsButton, MediaControls, MediaErrorMessage, MediaFullscreenButton, MediaLoading, MediaMuteButton, MediaPictureInPictureButton, MediaPlayButton, MediaPlaybackRateButton, MediaRoot, MediaSeek, MediaSettings, MediaSurface, MediaTime, MediaVideo, MediaVolume, PauseIcon, PictureInPictureIcon, PlayIcon, RetryIcon, SeekIcon, SettingsIcon, VideoPlayer, VolumeIcon, createMediaStore, describeMediaError, formatTime, useMedia, useMediaStore };
+export type { AudioPlayerProps, MediaAudioProps, MediaButtonProps, MediaCaptionsProps, MediaControlsProps, MediaErrorMessageProps, MediaIconProps, MediaInfo, MediaLoadingProps, MediaPlaybackRateButtonProps, MediaRootProps, MediaSeekProps, MediaSettingsProps, MediaSourceLoader, MediaState, MediaStore, MediaStoreOptions, MediaSurfaceProps, MediaTextTrack, MediaTimeProps, MediaTooltipAlign, MediaVideoProps, MediaVolumeProps, VideoPlayerProps, VideoTrack };