cafe-video-player 2.0.36 → 2.0.37

package/README.md

@@ -33,7 +33,7 @@ export default function HomePage() {
         {lang: "en", title: "انگلیسی", url: "https://hamrahi.cloud/subtitles/216-282790-6770242c63370b58ecce680d-sub_en.srt"},
       ]
     */
-    
+
   };
 
   return (
@@ -148,3 +148,70 @@ images: {
 },
 
 ```
+# Video HighLighter Integration Guide
+
+This document explains how to integrate and use the **Video HighLighter** feature in a Next.js project.
+
+## Overview
+
+The Video HighLighter enhances the video player with additional UI and state indicators during the download and preparation of video content. To enable it, several props must be passed to the player component.
+
+## Props
+
+### `vhl_status`
+Indicates the current state of the Video HighLighter process. Accepted values:
+
+- `Skeleton`: Shows the skeleton loading state.
+- `Waiting`: Indicates the waiting period before video download begins.
+- `download_start`: The download process has started.
+- `download_error`: An error occurred during the download.
+- `undefined`: Default value. Hides all Video HighLighter-related sections.
+
+### `vhl_progress`
+A numeric value representing the percentage of the download progress.
+
+### `vhl_duration`
+Total duration of the video in seconds (numeric value).
+
+### `vhl_statusText`
+Text displayed under the progress bar while downloading the video.  
+For greater flexibility (e.g., multiline messages), this prop should be passed as a JSX element.
+
+### `vhl_onRetry`
+A callback function executed if a download error occurs.
+
+### `banner`
+An image used as the banner for the video.
+
+## Important Notes
+
+After the video has been successfully downloaded, make sure to:
+
+1. Set the `vhl_status` to `undefined`.
+2. Pass the video `id` using the `id` prop to the player to start playback and load video details.
+
+---
+
+## 🧪 Example Usage in a Next.js Component
+
+```tsx
+import { VideoPlayerLibrary } from "cafe-video-player";
+
+export default function HomePage() {
+  const params = {
+      vhl_status="download_start"
+      vhl_progress={42}
+      vhl_duration={300}
+      vhl_statusText={<p>Downloading highlights...<br />Please wait.</p>}
+      vhl_onRetry={handleRetry}
+      banner="/images/video-banner.jpg"
+      id="abc123"
+  };
+
+  return (
+    <div>
+      <VideoPlayerLibrary params={params} />
+    </div>
+  );
+}
+```

package/index.d.mts

@@ -21,7 +21,7 @@ interface IParams {
     vhl_duration?: number;
     vhl_progress?: number;
     vhl_status?: "skeleton" | "waiting" | "download_start" | "download_complete" | "download_error";
-    vhl_statusText?: string;
+    vhl_statusText?: JSX.Element;
     vhl_onRetry?: Function;
 }
 interface ISubtitle {

package/index.d.ts

@@ -21,7 +21,7 @@ interface IParams {
     vhl_duration?: number;
     vhl_progress?: number;
     vhl_status?: "skeleton" | "waiting" | "download_start" | "download_complete" | "download_error";
-    vhl_statusText?: string;
+    vhl_statusText?: JSX.Element;
     vhl_onRetry?: Function;
 }
 interface ISubtitle {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cafe-video-player",
-  "version": "2.0.36",
+  "version": "2.0.37",
   "private": false,
   "main": "./dist/index.js",
   "module": "./dist/index.cjs",