@devix-technologies/react-gjirafa-vp-player 1.0.23 → 1.0.26

package/README.md

@@ -114,7 +114,6 @@ interface VPPlayerProps {
   projectId?: string; // Project ID for API calls (used with videoId or playlistId)
   playlistId?: string; // Playlist ID for fetching a playlist from API
   config?: Partial<VPPlayerConfig>; // Optional partial configuration to override defaults
-  apiKey?: string; // Optional API key for VP player requests; falls back to VP_API_KEY from .env if not provided.
   isReels?: boolean; // Optional flag to enable Reels/iShorties mode (defaults to false)
   thumbnailUrl?: string; // Optional URL to a thumbnail image for Reels mode
   hiddenClasses?: string[]; // Optional array of CSS class names to hide specific player elements
@@ -171,10 +170,6 @@ interface VPPlayerProps {
 
 - Optional partial configuration object to override the default `VPPlayerConfig`. Allows customization of player behavior and settings.
 
-### **apiKey?: string**
-
-- Optional API key for VP Player API requests. Falls back to `VITE_VP_API_KEY` from `.env` if not provided. A warning is logged if missing for API-based configurations.
-
 ### **isReels?: boolean**
 
 - Optional flag to enable Reels/iShorties mode, optimizing the player for short vertical video playback (e.g., 9:16 aspect ratio). Defaults to `false`.
@@ -218,7 +213,6 @@ interface VPPlayerProps {
   playerId="player"
   projectId="agmipnzb"
   playlistId="lzxikgjw"
-  apiKey="YOUR_API_KEY"
   onPlaylistData={(videos) => {
     console.log('Playlist loaded:', videos.length, 'videos');
     console.log('Main videos:', videos.filter(v => !v.isBackupPlaylist).length);
@@ -276,7 +270,6 @@ interface VPPlayerProps {
   playlistId="lzxikgjw"
   scriptUrl="https://host.vpplayer.tech/vertical-player/rbqcdwznd.js"
   isReels={true}
-  apiKey="YOUR_API_KEY"
   onVideoStarted={(videoData) => {
     console.log('Video changed:', videoData.title);
     console.log('Video index:', videoData.videoIndex);
@@ -292,7 +285,6 @@ interface VPPlayerProps {
   projectId="agmipnzb"
   videoId="vjsnuhvm"
   scriptUrl="https://host.vpplayer.tech/player/ptkzurnx.js"
-  apiKey="YOUR_API_KEY"
   onVideoStarted={(videoData) => {
     console.log('Video started:', videoData.title);
     console.log('Author:', videoData.author);
@@ -319,46 +311,6 @@ interface VPPlayerProps {
 
 2. Player Setup: Once the script is loaded and the DOM element is rendered, the vpPlayer function is called with the element's ID and the final configuration.
 
-### API Key Usage
-
-The API key can be provided via the apiKey prop or the VITE_VP_API_KEY environment variable, with props taking precedence, and a warning is logged if neither is supplied for API requests.
-
-- **Source:**
-  - Props (`apiKey`) or `.env` (`VITE_VP_API_KEY`).
-- **Priority:**
-  - Props > `.env`.
-- **Fallback:**
-  - Optional, e.g., `'FALLBACK_TEST_KEY'`.
-- **Warning:**
-  - Logged if missing for API calls.
-
-### Setting up the API Key
-
-#### Step 1: Create a .env File
-
-In the root of your project, create a `.env` file (or update an existing one) and add the following line:
-
-```bash
-VITE_VP_API_KEY=YOUR_API_KEY_HERE
-```
-
-Replace `YOUR_API_KEY_HERE` with your actual API key.
-
-The VPPlayer component will automatically use the `VITE_VP_API_KEY` environment variable if the `apiKey` is not provided via props:
-
-```bash
-import { VPPlayer } from "@dvxx/vp-player";
-
-const MyComponent = () => (
-  <VPPlayer
-    playerId="my-player"
-    videoId="abcdefgh123"
-    projectId="ijklmnop456"
-    // apiKey will be read from VITE_VP_API_KEY since it is not passed
-  />
-);
-```
-
 ## Supported Data Input Types
 
 ## Supported Data Input Types
@@ -492,7 +444,6 @@ const MyPlaylistComponent = () => {
         playerId="my-playlist-player"
         projectId="agmipnzb"
         playlistId="lzxikgjw"
-        apiKey="YOUR_API_KEY"
         onPlaylistData={(playlistVideos) => {
           setVideos(playlistVideos);
           console.log("Loaded videos:", playlistVideos.length);
@@ -516,7 +467,6 @@ Fires every time a video starts (scroll, click, auto-play). Perfect for analytic
   playlistId="lzxikgjw"
   scriptUrl="https://host.vpplayer.tech/vertical-player/rbqcdwznd.js"
   isReels={true}
-  apiKey="YOUR_API_KEY"
   onVideoStarted={(videoData) => {
     // Fires on scroll or arrow navigation
     console.log("Now playing:", videoData.title);
@@ -540,7 +490,6 @@ Fires every time a video starts (scroll, click, auto-play). Perfect for analytic
   projectId="agmipnzb"
   videoId="vjsnuhvm"
   scriptUrl="https://host.vpplayer.tech/player/ptkzurnx.js"
-  apiKey="YOUR_API_KEY"
   onVideoStarted={(videoData) => {
     // Fires on next/previous or auto-play
     // Full metadata fetched from API
@@ -594,7 +543,6 @@ const AdvancedPlayerComponent = () => {
         projectId="agmipnzb"
         playlistId="lzxikgjw"
         scriptUrl="https://host.vpplayer.tech/player/ptkzurnx.js"
-        apiKey="YOUR_API_KEY"
         onPlaylistData={(videos) => {
           setPlaylistVideos(videos);
           console.log(`Playlist loaded: ${videos.length} videos`);