kplayer-ts 1.0.2 → 1.0.4

package/dist/react/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react"),l=require("kplayer-ts");l=s(l,1);let u=require("react/jsx-runtime");function d(e,t){typeof e==`function`?e(t):e&&(e.current=t)}var f=(0,c.forwardRef)(function({options:e,onReady:t,...n},r){let i=(0,c.useRef)(null),a=(0,c.useRef)(e),o=(0,c.useRef)(t);return a.current=e,o.current=t,(0,c.useEffect)(()=>{if(!i.current)return;let e=new l.default({...a.current,container:i.current});return d(r,e),o.current?.(e),()=>{e.destroy(),d(r,null)}},[]),(0,u.jsx)(`div`,{ref:i,...n})});exports.KPlayer=f,exports.default=f;
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/react/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  type ForwardedRef,\n  type HTMLAttributes,\n} from \"react\";\nimport KPlayerCore from \"kplayer-ts\";\nimport type { KPlayerOptions } from \"kplayer-ts\";\n\n/** The underlying vanilla player instance (same as `new KPlayer(...)`). */\nexport type KPlayerInstance = KPlayerCore;\n\nexport interface KPlayerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Player options — same as the vanilla `KPlayer` options, but WITHOUT\n   * `container` (the component provides its own `<div>` as the container).\n   */\n  options: Omit<KPlayerOptions, \"container\">;\n  /** Called once with the player instance right after it is created. */\n  onReady?: (player: KPlayerInstance) => void;\n}\n\nfunction assignRef(\n  ref: ForwardedRef<KPlayerInstance>,\n  value: KPlayerInstance | null,\n): void {\n  if (typeof ref === \"function\") ref(value);\n  else if (ref) ref.current = value;\n}\n\n/**\n * React/Next.js wrapper around KPlayer.\n *\n * The player is created in `useEffect` (browser only) and destroyed on unmount,\n * so it is SSR-safe. Access the underlying instance via a ref or `onReady`.\n *\n * ```tsx\n * import { KPlayer } from \"kplayer-ts/react\";\n *\n * <KPlayer options={{ video: { url: \"demo.m3u8\", type: \"hls\" } }} />\n * ```\n *\n * Options are read once on mount — to load a different video, give the component\n * a new `key` (to remount it) or drive it imperatively through the ref / `onReady`.\n */\nexport const KPlayer = forwardRef<KPlayerInstance, KPlayerProps>(\n  function KPlayer({ options, onReady, ...divProps }, ref) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    // Keep latest options/callback in refs so re-renders never recreate the player.\n    const optionsRef = useRef(options);\n    const onReadyRef = useRef(onReady);\n    optionsRef.current = options;\n    onReadyRef.current = onReady;\n\n    useEffect(() => {\n      if (!containerRef.current) return;\n      const player = new KPlayerCore({\n        ...optionsRef.current,\n        container: containerRef.current,\n      } as KPlayerOptions);\n      assignRef(ref, player);\n      onReadyRef.current?.(player);\n\n      return () => {\n        player.destroy();\n        assignRef(ref, null);\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return <div ref={containerRef} {...divProps} />;\n  },\n);\n\nexport default KPlayer;\n\nexport type { KPlayerOptions } from \"kplayer-ts\";\n"],"mappings":"wpBAuBA,SAAS,EACP,EACA,EACM,CACF,OAAO,GAAQ,WAAY,EAAI,CAAK,EAC/B,IAAK,EAAI,QAAU,EAC9B,CAiBA,IAAa,GAAA,EAAA,EAAA,YACX,SAAiB,CAAE,UAAS,UAAS,GAAG,GAAY,EAAK,CACvD,IAAM,GAAA,EAAA,EAAA,QAAsC,IAAI,EAE1C,GAAA,EAAA,EAAA,QAAoB,CAAO,EAC3B,GAAA,EAAA,EAAA,QAAoB,CAAO,EAoBjC,MAnBA,GAAW,QAAU,EACrB,EAAW,QAAU,GAErB,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EAAa,QAAS,OAC3B,IAAM,EAAS,IAAI,EAAA,QAAY,CAC7B,GAAG,EAAW,QACd,UAAW,EAAa,OAC1B,CAAmB,EAInB,OAHA,EAAU,EAAK,CAAM,EACrB,EAAW,UAAU,CAAM,MAEd,CACX,EAAO,QAAQ,EACf,EAAU,EAAK,IAAI,CACrB,CAEF,EAAG,CAAC,CAAC,GAEE,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAc,GAAI,CAAW,CAAA,CAChD,CACF"}

package/dist/react/index.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from 'react';
+import { default as KPlayerCore, KPlayerOptions } from '../ts/index';
+/** The underlying vanilla player instance (same as `new KPlayer(...)`). */
+export type KPlayerInstance = KPlayerCore;
+export interface KPlayerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Player options — same as the vanilla `KPlayer` options, but WITHOUT
+     * `container` (the component provides its own `<div>` as the container).
+     */
+    options: Omit<KPlayerOptions, "container">;
+    /** Called once with the player instance right after it is created. */
+    onReady?: (player: KPlayerInstance) => void;
+}
+/**
+ * React/Next.js wrapper around KPlayer.
+ *
+ * The player is created in `useEffect` (browser only) and destroyed on unmount,
+ * so it is SSR-safe. Access the underlying instance via a ref or `onReady`.
+ *
+ * ```tsx
+ * import { KPlayer } from "kplayer-ts/react";
+ *
+ * <KPlayer options={{ video: { url: "demo.m3u8", type: "hls" } }} />
+ * ```
+ *
+ * Options are read once on mount — to load a different video, give the component
+ * a new `key` (to remount it) or drive it imperatively through the ref / `onReady`.
+ */
+export declare const KPlayer: import('react').ForwardRefExoticComponent<KPlayerProps & import('react').RefAttributes<KPlayerCore>>;
+export default KPlayer;
+export type { KPlayerOptions } from '../ts/index';

package/dist/react/index.es.js

@@ -0,0 +1,27 @@
+import { forwardRef as e, useEffect as t, useRef as n } from "react";
+import r from "kplayer-ts";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/react/index.tsx
+function a(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var o = e(function({ options: e, onReady: o, ...s }, c) {
+	let l = n(null), u = n(e), d = n(o);
+	return u.current = e, d.current = o, t(() => {
+		if (!l.current) return;
+		let e = new r({
+			...u.current,
+			container: l.current
+		});
+		return a(c, e), d.current?.(e), () => {
+			e.destroy(), a(c, null);
+		};
+	}, []), /* @__PURE__ */ i("div", {
+		ref: l,
+		...s
+	});
+});
+//#endregion
+export { o as KPlayer, o as default };
+
+//# sourceMappingURL=index.es.js.map

package/dist/react/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../src/react/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  type ForwardedRef,\n  type HTMLAttributes,\n} from \"react\";\nimport KPlayerCore from \"kplayer-ts\";\nimport type { KPlayerOptions } from \"kplayer-ts\";\n\n/** The underlying vanilla player instance (same as `new KPlayer(...)`). */\nexport type KPlayerInstance = KPlayerCore;\n\nexport interface KPlayerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Player options — same as the vanilla `KPlayer` options, but WITHOUT\n   * `container` (the component provides its own `<div>` as the container).\n   */\n  options: Omit<KPlayerOptions, \"container\">;\n  /** Called once with the player instance right after it is created. */\n  onReady?: (player: KPlayerInstance) => void;\n}\n\nfunction assignRef(\n  ref: ForwardedRef<KPlayerInstance>,\n  value: KPlayerInstance | null,\n): void {\n  if (typeof ref === \"function\") ref(value);\n  else if (ref) ref.current = value;\n}\n\n/**\n * React/Next.js wrapper around KPlayer.\n *\n * The player is created in `useEffect` (browser only) and destroyed on unmount,\n * so it is SSR-safe. Access the underlying instance via a ref or `onReady`.\n *\n * ```tsx\n * import { KPlayer } from \"kplayer-ts/react\";\n *\n * <KPlayer options={{ video: { url: \"demo.m3u8\", type: \"hls\" } }} />\n * ```\n *\n * Options are read once on mount — to load a different video, give the component\n * a new `key` (to remount it) or drive it imperatively through the ref / `onReady`.\n */\nexport const KPlayer = forwardRef<KPlayerInstance, KPlayerProps>(\n  function KPlayer({ options, onReady, ...divProps }, ref) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    // Keep latest options/callback in refs so re-renders never recreate the player.\n    const optionsRef = useRef(options);\n    const onReadyRef = useRef(onReady);\n    optionsRef.current = options;\n    onReadyRef.current = onReady;\n\n    useEffect(() => {\n      if (!containerRef.current) return;\n      const player = new KPlayerCore({\n        ...optionsRef.current,\n        container: containerRef.current,\n      } as KPlayerOptions);\n      assignRef(ref, player);\n      onReadyRef.current?.(player);\n\n      return () => {\n        player.destroy();\n        assignRef(ref, null);\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return <div ref={containerRef} {...divProps} />;\n  },\n);\n\nexport default KPlayer;\n\nexport type { KPlayerOptions } from \"kplayer-ts\";\n"],"mappings":";;;;AAuBA,SAAS,EACP,GACA,GACM;CACN,AAAI,OAAO,KAAQ,aAAY,EAAI,CAAK,IAC/B,MAAK,EAAI,UAAU;AAC9B;AAiBA,IAAa,IAAU,EACrB,SAAiB,EAAE,YAAS,YAAS,GAAG,KAAY,GAAK;CACvD,IAAM,IAAe,EAAuB,IAAI,GAE1C,IAAa,EAAO,CAAO,GAC3B,IAAa,EAAO,CAAO;CAoBjC,OAnBA,EAAW,UAAU,GACrB,EAAW,UAAU,GAErB,QAAgB;EACd,IAAI,CAAC,EAAa,SAAS;EAC3B,IAAM,IAAS,IAAI,EAAY;GAC7B,GAAG,EAAW;GACd,WAAW,EAAa;EAC1B,CAAmB;EAInB,OAHA,EAAU,GAAK,CAAM,GACrB,EAAW,UAAU,CAAM,SAEd;GAEX,AADA,EAAO,QAAQ,GACf,EAAU,GAAK,IAAI;EACrB;CAEF,GAAG,CAAC,CAAC,GAEE,kBAAC,OAAD;EAAK,KAAK;EAAc,GAAI;CAAW,CAAA;AAChD,CACF"}

package/dist/ts/controller.d.ts

@@ -10,6 +10,11 @@ declare class Controller {
     private _skipTarget;
     private session;
     private currentMedia;
+    private _tapTime;
+    private _tapSide;
+    private _tapTimer;
+    private _seekAccum;
+    private _rippleTimer;
     constructor(player: KPlayer);
     initPlayButton(): void;
     initSeekButtons(): void;
@@ -33,6 +38,8 @@ declare class Controller {
     hide(): void;
     isShow(): boolean;
     toggle(): void;
+    private _setupMobileTapSeek;
+    private _showSeekRipple;
     destroy(): void;
 }
 export default Controller;

package/dist/ts/player.d.ts

@@ -74,12 +74,14 @@ declare class KPlayer {
     switchingQuality: boolean;
     prevIndex?: number;
     prevVideo?: HTMLVideoElement;
+    resizeObserver?: ResizeObserver;
     constructor(options: Partial<KPlayerOptions> & {
         video: KPlayerOptions["video"];
     });
     seek(time: number): void;
     play(fromNative?: boolean): void;
     pause(fromNative?: boolean): void;
+    private _setPlayLabel;
     switchVolumeIcon(): void;
     volume(percentage?: number, nostorage?: boolean, nonotice?: boolean): number;
     toggle(): void;
@@ -101,6 +103,7 @@ declare class KPlayer {
     speed(rate: number): void;
     destroy(): void;
     static get version(): string;
+    private _resolveSubtitleCrypto;
     private _loadSubtitleTexts;
     loadSubtitleByIndex(index: number): Promise<void>;
 }

package/dist/ts/setting.d.ts

@@ -8,6 +8,7 @@ declare class Setting {
     chromecastEntry: HTMLElement | null;
     screenshotEntry: HTMLElement | null;
     constructor(player: KPlayer);
+    private _setupMenuA11y;
     hide(): void;
     show(): void;
 }

package/dist/ts/types.d.ts

@@ -24,6 +24,23 @@ export interface SubtitleOptions {
     encrypt?: boolean;
     iv?: string;
     key?: string;
+    /**
+     * `key`/`iv`-г статикаар bundle/page-д бичихийн оронд ажиллах үед (жишээ нь
+     * нэвтрэлт шаардсан backend-ээс) татаж авах async provider. Өгсөн бол `key`/
+     * `iv`-ийн оронд үүнийг ашиглана.
+     *
+     * ⚠️ Аюулгүй байдлын анхааруулга: тайлалт нь browser талд хийгддэг тул
+     * түлхүүрийг хэрэглэгчээс БҮРЭН нуух боломжгүй — DevTools / Network tab-аас
+     * үргэлж олж болно. Энэ нь зөвхөн casual scraping-ийг хүндрүүлэх зорилготой.
+     * Жинхэнэ контент хамгаалалт хэрэгтэй бол DRM (EME/Widevine/FairPlay) ашигла.
+     */
+    keyProvider?: () => {
+        key: string;
+        iv: string;
+    } | Promise<{
+        key: string;
+        iv: string;
+    }>;
 }
 export interface AdItem {
     name?: string;

package/package.json

@@ -1,25 +1,57 @@
 {
   "name": "kplayer-ts",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Kenji video player - TypeScript",
-  "main": "dist/kplayer-ts.cjs.js",
-  "module": "dist/kplayer-ts.es.js",
-  "types": "dist/kplayer-ts.d.ts",
+  "type": "module",
+  "main": "./dist/kplayer-ts.cjs",
+  "module": "./dist/kplayer-ts.es.js",
+  "types": "./dist/kplayer-ts.d.ts",
+  "unpkg": "./dist/kplayer-ts.umd.js",
+  "jsdelivr": "./dist/kplayer-ts.umd.js",
+  "exports": {
+    ".": {
+      "types": "./dist/kplayer-ts.d.ts",
+      "import": "./dist/kplayer-ts.es.js",
+      "require": "./dist/kplayer-ts.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.es.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && vite build --mode react",
     "dev": "vite",
     "typecheck": "tsc --noEmit"
   },
+  "homepage": "https://github.com/kenji-07",
+  "author": "Kenji",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
     "less": "^4.6.4",
-    "typescript": "^5.9.3",
-    "vite": "^5.0.0",
-    "vite-plugin-css-injected-by-js": "^4.0.1",
-    "vite-plugin-dts": "^4.5.4"
+    "react": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
+    "vite-plugin-dts": "^5.0.2"
   },
   "keywords": [
     "video",
@@ -33,12 +65,12 @@
     "screenshot",
     "hls",
     "custom ad",
-    "fullseceen",
+    "fullscreen",
     "kplayer"
   ],
   "license": "MIT",
   "dependencies": {
     "balloon-css": "^1.2.0",
-    "hls.js": "^1.6.15"
+    "hls.js": "^1.6.16"
   }
 }