@chunkify/player-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chunkify contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+import { type CSSProperties, type DOMAttributes, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import type { ChunkifyPlayer as PlayerElement, PlaybackErrorDetail, PlayerAspectRatio, PlayerCredentials } from "@chunkify/player";
+declare const mediaEvents: {
+    readonly onAbort: "abort";
+    readonly onCanPlay: "canplay";
+    readonly onCanPlayThrough: "canplaythrough";
+    readonly onDurationChange: "durationchange";
+    readonly onEmptied: "emptied";
+    readonly onEnded: "ended";
+    readonly onError: "error";
+    readonly onLoadedData: "loadeddata";
+    readonly onLoadedMetadata: "loadedmetadata";
+    readonly onLoadStart: "loadstart";
+    readonly onPause: "pause";
+    readonly onPlay: "play";
+    readonly onPlaying: "playing";
+    readonly onProgress: "progress";
+    readonly onRateChange: "ratechange";
+    readonly onResize: "resize";
+    readonly onSeeked: "seeked";
+    readonly onSeeking: "seeking";
+    readonly onStalled: "stalled";
+    readonly onSuspend: "suspend";
+    readonly onTimeUpdate: "timeupdate";
+    readonly onVolumeChange: "volumechange";
+    readonly onWaiting: "waiting";
+    readonly onPlaybackError: "playback-error";
+};
+export type ChunkifyPlayerRef = PlayerElement;
+export type PlayerMediaEvent = Event & {
+    readonly currentTarget: PlayerElement;
+};
+export type PlayerPlaybackErrorEvent = CustomEvent<PlaybackErrorDetail> & {
+    readonly currentTarget: PlayerElement;
+};
+type MediaCallbacks = {
+    [K in keyof typeof mediaEvents]?: ((event: K extends "onPlaybackError" ? PlayerPlaybackErrorEvent : PlayerMediaEvent) => void) | undefined;
+};
+export type ChunkifyPlayerStyle = CSSProperties & {
+    "--media-object-fit"?: CSSProperties["objectFit"] | undefined;
+    "--media-object-position"?: CSSProperties["objectPosition"] | undefined;
+    "--play-button"?: CSSProperties["display"] | undefined;
+    "--mute-button"?: CSSProperties["display"] | undefined;
+    "--captions-button"?: CSSProperties["display"] | undefined;
+    "--pip-button"?: CSSProperties["display"] | undefined;
+    "--fullscreen-button"?: CSSProperties["display"] | undefined;
+    "--airplay-button"?: CSSProperties["display"] | undefined;
+    "--cast-button"?: CSSProperties["display"] | undefined;
+};
+type HostProps = Omit<HTMLAttributes<PlayerElement>, keyof DOMAttributes<PlayerElement> | "style"> & {
+    style?: ChunkifyPlayerStyle | undefined;
+};
+export type ChunkifyPlayerProps = HostProps & MediaCallbacks & {
+    children?: ReactNode | undefined;
+    ref?: Ref<ChunkifyPlayerRef> | undefined;
+    src?: string | null | undefined;
+    poster?: string | null | undefined;
+    thumbnails?: string | null | undefined;
+    preload?: string | null | undefined;
+    crossOrigin?: string | null | undefined;
+    credentials?: PlayerCredentials | null | undefined;
+    theme?: string | null | undefined;
+    aspectRatio?: PlayerAspectRatio | null | undefined;
+    primaryColor?: string | null | undefined;
+    secondaryColor?: string | null | undefined;
+    accentColor?: string | null | undefined;
+    autoPlay?: boolean | undefined;
+    loop?: boolean | undefined;
+    muted?: boolean | undefined;
+    autoSeekToLive?: boolean | undefined;
+    controls?: boolean | undefined;
+    playsInline?: boolean | undefined;
+};
+export declare function ChunkifyPlayer(props: ChunkifyPlayerProps): ReactElement | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,96 @@
+"use client";
+import { createElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+const mediaEvents = {
+    onAbort: "abort",
+    onCanPlay: "canplay",
+    onCanPlayThrough: "canplaythrough",
+    onDurationChange: "durationchange",
+    onEmptied: "emptied",
+    onEnded: "ended",
+    onError: "error",
+    onLoadedData: "loadeddata",
+    onLoadedMetadata: "loadedmetadata",
+    onLoadStart: "loadstart",
+    onPause: "pause",
+    onPlay: "play",
+    onPlaying: "playing",
+    onProgress: "progress",
+    onRateChange: "ratechange",
+    onResize: "resize",
+    onSeeked: "seeked",
+    onSeeking: "seeking",
+    onStalled: "stalled",
+    onSuspend: "suspend",
+    onTimeUpdate: "timeupdate",
+    onVolumeChange: "volumechange",
+    onWaiting: "waiting",
+    onPlaybackError: "playback-error",
+};
+const callbackNames = Object.keys(mediaEvents);
+export function ChunkifyPlayer(props) {
+    const { ref, ...hostProps } = props;
+    const elementRef = useRef(null);
+    const attachRef = useCallback((element) => {
+        elementRef.current = element;
+        const cleanup = typeof ref === "function" ? ref(element) : undefined;
+        if (ref && typeof ref !== "function")
+            ref.current = element;
+        return () => {
+            elementRef.current = null;
+            if (typeof cleanup === "function")
+                cleanup();
+            else if (typeof ref === "function")
+                ref(null);
+            else if (ref)
+                ref.current = null;
+        };
+    }, [ref]);
+    const [registered, setRegistered] = useState(false);
+    const [failure, setFailure] = useState(null);
+    useEffect(() => {
+        let active = true;
+        void import("@chunkify/player").then(() => { if (active)
+            setRegistered(true); }, (error) => { if (active)
+            setFailure({ error }); });
+        return () => { active = false; };
+    }, []);
+    useLayoutEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const removeListeners = [];
+        for (const name of callbackNames) {
+            const callback = props[name];
+            if (!callback)
+                continue;
+            const listener = (event) => {
+                if (name === "onPlaybackError")
+                    props[name]?.(event);
+                else
+                    props[name]?.(event);
+            };
+            element.addEventListener(mediaEvents[name], listener);
+            removeListeners.push(() => element.removeEventListener(mediaEvents[name], listener));
+        }
+        return () => { for (const remove of removeListeners)
+            remove(); };
+    }, [registered, props]);
+    if (failure)
+        throw failure.error;
+    if (!registered)
+        return null;
+    const elementProps = {
+        ...hostProps,
+        ref: attachRef,
+        autoPlay: props.autoPlay ?? false,
+        muted: props.muted ?? false,
+        loop: props.loop ?? false,
+        playsInline: props.playsInline ?? false,
+        controls: props.controls ?? false,
+        autoSeekToLive: props.autoSeekToLive ?? false,
+    };
+    for (const name of callbackNames)
+        delete elementProps[name];
+    return createElement("chunkify-player", elementProps);
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport {\n  createElement,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type DOMAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport type {\n  ChunkifyPlayer as PlayerElement,\n  PlaybackErrorDetail,\n  PlayerAspectRatio,\n  PlayerCredentials,\n} from \"@chunkify/player\";\n\nconst mediaEvents = {\n  onAbort: \"abort\",\n  onCanPlay: \"canplay\",\n  onCanPlayThrough: \"canplaythrough\",\n  onDurationChange: \"durationchange\",\n  onEmptied: \"emptied\",\n  onEnded: \"ended\",\n  onError: \"error\",\n  onLoadedData: \"loadeddata\",\n  onLoadedMetadata: \"loadedmetadata\",\n  onLoadStart: \"loadstart\",\n  onPause: \"pause\",\n  onPlay: \"play\",\n  onPlaying: \"playing\",\n  onProgress: \"progress\",\n  onRateChange: \"ratechange\",\n  onResize: \"resize\",\n  onSeeked: \"seeked\",\n  onSeeking: \"seeking\",\n  onStalled: \"stalled\",\n  onSuspend: \"suspend\",\n  onTimeUpdate: \"timeupdate\",\n  onVolumeChange: \"volumechange\",\n  onWaiting: \"waiting\",\n  onPlaybackError: \"playback-error\",\n} as const;\n\nconst callbackNames = Object.keys(mediaEvents) as Array<keyof typeof mediaEvents>;\n\nexport type ChunkifyPlayerRef = PlayerElement;\nexport type PlayerMediaEvent = Event & { readonly currentTarget: PlayerElement };\nexport type PlayerPlaybackErrorEvent = CustomEvent<PlaybackErrorDetail> & {\n  readonly currentTarget: PlayerElement;\n};\ntype MediaCallbacks = {\n  [K in keyof typeof mediaEvents]?: ((event: K extends \"onPlaybackError\"\n    ? PlayerPlaybackErrorEvent\n    : PlayerMediaEvent) => void) | undefined;\n};\n\nexport type ChunkifyPlayerStyle = CSSProperties & {\n  \"--media-object-fit\"?: CSSProperties[\"objectFit\"] | undefined;\n  \"--media-object-position\"?: CSSProperties[\"objectPosition\"] | undefined;\n  \"--play-button\"?: CSSProperties[\"display\"] | undefined;\n  \"--mute-button\"?: CSSProperties[\"display\"] | undefined;\n  \"--captions-button\"?: CSSProperties[\"display\"] | undefined;\n  \"--pip-button\"?: CSSProperties[\"display\"] | undefined;\n  \"--fullscreen-button\"?: CSSProperties[\"display\"] | undefined;\n  \"--airplay-button\"?: CSSProperties[\"display\"] | undefined;\n  \"--cast-button\"?: CSSProperties[\"display\"] | undefined;\n};\ntype HostProps = Omit<\n  HTMLAttributes<PlayerElement>,\n  keyof DOMAttributes<PlayerElement> | \"style\"\n> & { style?: ChunkifyPlayerStyle | undefined };\n\nexport type ChunkifyPlayerProps = HostProps & MediaCallbacks & {\n  children?: ReactNode | undefined;\n  ref?: Ref<ChunkifyPlayerRef> | undefined;\n  src?: string | null | undefined;\n  poster?: string | null | undefined;\n  thumbnails?: string | null | undefined;\n  preload?: string | null | undefined;\n  crossOrigin?: string | null | undefined;\n  credentials?: PlayerCredentials | null | undefined;\n  theme?: string | null | undefined;\n  aspectRatio?: PlayerAspectRatio | null | undefined;\n  primaryColor?: string | null | undefined;\n  secondaryColor?: string | null | undefined;\n  accentColor?: string | null | undefined;\n  autoPlay?: boolean | undefined;\n  loop?: boolean | undefined;\n  muted?: boolean | undefined;\n  autoSeekToLive?: boolean | undefined;\n  controls?: boolean | undefined;\n  playsInline?: boolean | undefined;\n};\n\nexport function ChunkifyPlayer(props: ChunkifyPlayerProps): ReactElement | null {\n  const { ref, ...hostProps } = props;\n  const elementRef = useRef<PlayerElement | null>(null);\n  const attachRef = useCallback((element: PlayerElement | null) => {\n    elementRef.current = element;\n    const cleanup = typeof ref === \"function\" ? ref(element) : undefined;\n    if (ref && typeof ref !== \"function\") ref.current = element;\n    return () => {\n      elementRef.current = null;\n      if (typeof cleanup === \"function\") cleanup();\n      else if (typeof ref === \"function\") ref(null);\n      else if (ref) ref.current = null;\n    };\n  }, [ref]);\n  const [registered, setRegistered] = useState(false);\n  const [failure, setFailure] = useState<{ error: unknown } | null>(null);\n\n  useEffect(() => {\n    let active = true;\n    void import(\"@chunkify/player\").then(\n      () => { if (active) setRegistered(true); },\n      (error: unknown) => { if (active) setFailure({ error }); },\n    );\n    return () => { active = false; };\n  }, []);\n\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    const removeListeners: Array<() => void> = [];\n    for (const name of callbackNames) {\n      const callback = props[name];\n      if (!callback) continue;\n      const listener = (event: Event) => {\n        if (name === \"onPlaybackError\") props[name]?.(event as PlayerPlaybackErrorEvent);\n        else props[name]?.(event as PlayerMediaEvent);\n      };\n      element.addEventListener(mediaEvents[name], listener);\n      removeListeners.push(() => element.removeEventListener(mediaEvents[name], listener));\n    }\n    return () => { for (const remove of removeListeners) remove(); };\n  }, [registered, props]);\n\n  if (failure) throw failure.error;\n  if (!registered) return null;\n\n  const elementProps: Record<string, unknown> = {\n    ...hostProps,\n    ref: attachRef,\n    autoPlay: props.autoPlay ?? false,\n    muted: props.muted ?? false,\n    loop: props.loop ?? false,\n    playsInline: props.playsInline ?? false,\n    controls: props.controls ?? false,\n    autoSeekToLive: props.autoSeekToLive ?? false,\n  };\n  for (const name of callbackNames) delete elementProps[name];\n  return createElement(\"chunkify-player\", elementProps);\n}\n"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@chunkify/player-react",
+  "version": "1.0.0",
+  "description": "Typed React wrapper for the Chunkify player Web Component",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chunkifydev/chunkify-player.git",
+    "directory": "packages/player-react"
+  },
+  "homepage": "https://github.com/chunkifydev/chunkify-player#readme",
+  "bugs": {
+    "url": "https://github.com/chunkifydev/chunkify-player/issues"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "npm run clean && tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@chunkify/player": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,160 @@
+"use client";
+
+import {
+  createElement,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type DOMAttributes,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
+import type {
+  ChunkifyPlayer as PlayerElement,
+  PlaybackErrorDetail,
+  PlayerAspectRatio,
+  PlayerCredentials,
+} from "@chunkify/player";
+
+const mediaEvents = {
+  onAbort: "abort",
+  onCanPlay: "canplay",
+  onCanPlayThrough: "canplaythrough",
+  onDurationChange: "durationchange",
+  onEmptied: "emptied",
+  onEnded: "ended",
+  onError: "error",
+  onLoadedData: "loadeddata",
+  onLoadedMetadata: "loadedmetadata",
+  onLoadStart: "loadstart",
+  onPause: "pause",
+  onPlay: "play",
+  onPlaying: "playing",
+  onProgress: "progress",
+  onRateChange: "ratechange",
+  onResize: "resize",
+  onSeeked: "seeked",
+  onSeeking: "seeking",
+  onStalled: "stalled",
+  onSuspend: "suspend",
+  onTimeUpdate: "timeupdate",
+  onVolumeChange: "volumechange",
+  onWaiting: "waiting",
+  onPlaybackError: "playback-error",
+} as const;
+
+const callbackNames = Object.keys(mediaEvents) as Array<keyof typeof mediaEvents>;
+
+export type ChunkifyPlayerRef = PlayerElement;
+export type PlayerMediaEvent = Event & { readonly currentTarget: PlayerElement };
+export type PlayerPlaybackErrorEvent = CustomEvent<PlaybackErrorDetail> & {
+  readonly currentTarget: PlayerElement;
+};
+type MediaCallbacks = {
+  [K in keyof typeof mediaEvents]?: ((event: K extends "onPlaybackError"
+    ? PlayerPlaybackErrorEvent
+    : PlayerMediaEvent) => void) | undefined;
+};
+
+export type ChunkifyPlayerStyle = CSSProperties & {
+  "--media-object-fit"?: CSSProperties["objectFit"] | undefined;
+  "--media-object-position"?: CSSProperties["objectPosition"] | undefined;
+  "--play-button"?: CSSProperties["display"] | undefined;
+  "--mute-button"?: CSSProperties["display"] | undefined;
+  "--captions-button"?: CSSProperties["display"] | undefined;
+  "--pip-button"?: CSSProperties["display"] | undefined;
+  "--fullscreen-button"?: CSSProperties["display"] | undefined;
+  "--airplay-button"?: CSSProperties["display"] | undefined;
+  "--cast-button"?: CSSProperties["display"] | undefined;
+};
+type HostProps = Omit<
+  HTMLAttributes<PlayerElement>,
+  keyof DOMAttributes<PlayerElement> | "style"
+> & { style?: ChunkifyPlayerStyle | undefined };
+
+export type ChunkifyPlayerProps = HostProps & MediaCallbacks & {
+  children?: ReactNode | undefined;
+  ref?: Ref<ChunkifyPlayerRef> | undefined;
+  src?: string | null | undefined;
+  poster?: string | null | undefined;
+  thumbnails?: string | null | undefined;
+  preload?: string | null | undefined;
+  crossOrigin?: string | null | undefined;
+  credentials?: PlayerCredentials | null | undefined;
+  theme?: string | null | undefined;
+  aspectRatio?: PlayerAspectRatio | null | undefined;
+  primaryColor?: string | null | undefined;
+  secondaryColor?: string | null | undefined;
+  accentColor?: string | null | undefined;
+  autoPlay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  autoSeekToLive?: boolean | undefined;
+  controls?: boolean | undefined;
+  playsInline?: boolean | undefined;
+};
+
+export function ChunkifyPlayer(props: ChunkifyPlayerProps): ReactElement | null {
+  const { ref, ...hostProps } = props;
+  const elementRef = useRef<PlayerElement | null>(null);
+  const attachRef = useCallback((element: PlayerElement | null) => {
+    elementRef.current = element;
+    const cleanup = typeof ref === "function" ? ref(element) : undefined;
+    if (ref && typeof ref !== "function") ref.current = element;
+    return () => {
+      elementRef.current = null;
+      if (typeof cleanup === "function") cleanup();
+      else if (typeof ref === "function") ref(null);
+      else if (ref) ref.current = null;
+    };
+  }, [ref]);
+  const [registered, setRegistered] = useState(false);
+  const [failure, setFailure] = useState<{ error: unknown } | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    void import("@chunkify/player").then(
+      () => { if (active) setRegistered(true); },
+      (error: unknown) => { if (active) setFailure({ error }); },
+    );
+    return () => { active = false; };
+  }, []);
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const removeListeners: Array<() => void> = [];
+    for (const name of callbackNames) {
+      const callback = props[name];
+      if (!callback) continue;
+      const listener = (event: Event) => {
+        if (name === "onPlaybackError") props[name]?.(event as PlayerPlaybackErrorEvent);
+        else props[name]?.(event as PlayerMediaEvent);
+      };
+      element.addEventListener(mediaEvents[name], listener);
+      removeListeners.push(() => element.removeEventListener(mediaEvents[name], listener));
+    }
+    return () => { for (const remove of removeListeners) remove(); };
+  }, [registered, props]);
+
+  if (failure) throw failure.error;
+  if (!registered) return null;
+
+  const elementProps: Record<string, unknown> = {
+    ...hostProps,
+    ref: attachRef,
+    autoPlay: props.autoPlay ?? false,
+    muted: props.muted ?? false,
+    loop: props.loop ?? false,
+    playsInline: props.playsInline ?? false,
+    controls: props.controls ?? false,
+    autoSeekToLive: props.autoSeekToLive ?? false,
+  };
+  for (const name of callbackNames) delete elementProps[name];
+  return createElement("chunkify-player", elementProps);
+}