@obipascal/player 1.0.0 → 1.0.2

package/README.md

@@ -5,6 +5,7 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 ## ✨ Features
 
 ### Core Playback
+
 - 🎬 **HLS Streaming**: Full HLS.js support with adaptive bitrate streaming
 - 🔒 **CloudFront Integration**: Native support for CloudFront signed cookies and S3-hosted videos
 - 🎯 **Skip Controls**: 10-second forward/backward skip with circular arrow buttons
@@ -13,11 +14,13 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 - 🎛️ **Playback Rate**: Adjustable speed (0.5x - 2x)
 
 ### Subtitle & Accessibility
+
 - 📝 **Subtitle Support**: Full subtitle/caption support with programmatic API
 - 🌐 **Multi-language**: Support for multiple subtitle tracks with language selection
 - ♿ **Accessibility**: WCAG compliant with keyboard navigation
 
 ### UI & Controls
+
 - 🎨 **Modern UI Design**: Beautiful controls with blur effects, gradients, and smooth animations
 - 🖱️ **Smart Controls**: Auto-hide on inactivity, fade on hover
 - 📍 **Sticky Controls**: Optional persistent controls (toggle in settings)
@@ -27,6 +30,7 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 - 🎨 **Custom Theming**: Full CSS variable theming with 8 customizable properties
 
 ### Developer Experience
+
 - ⚛️ **React Support**: Component, Hook, and Context Provider patterns
 - 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions
 - 📊 **Analytics & QoE**: Built-in analytics tracking and Quality of Experience metrics
@@ -37,13 +41,13 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 ## 📦 Installation
 
 ```bash
-npm install @wontum/player hls.js
+npm install @obipascal/player hls.js
 ```
 
 Or with yarn:
 
 ```bash
-yarn add @wontum/player hls.js
+yarn add @obipascal/player hls.js
 ```
 
 ## 🚀 Quick Start
@@ -60,7 +64,7 @@ yarn add @wontum/player hls.js
 		<div id="player-container"></div>
 
 		<script type="module">
-			import { WontumPlayer } from "@wontum/player"
+			import { WontumPlayer } from "@obipascal/player"
 
 			const player = new WontumPlayer({
 				src: "https://media.example.com/video/playlist.m3u8",
@@ -98,7 +102,7 @@ yarn add @wontum/player hls.js
 			player.on("timeupdate", (event) => {
 				console.log("Current time:", event.data.currentTime)
 			})
-			
+
 			// Programmatic subtitle control
 			player.enableSubtitles(0) // Enable first subtitle track
 			player.toggleSubtitles() // Toggle subtitles on/off
@@ -110,7 +114,7 @@ yarn add @wontum/player hls.js
 ### React Component
 
 ```tsx
-import { WontumPlayerReact } from "@wontum/player"
+import { WontumPlayerReact } from "@obipascal/player"
 
 function VideoPlayer() {
 	return (
@@ -146,7 +150,7 @@ function VideoPlayer() {
 ### React Hook (Custom Controls)
 
 ```tsx
-import { useWontumPlayer } from "@wontum/player"
+import { useWontumPlayer } from "@obipascal/player"
 
 function CustomPlayer() {
 	const { containerRef, player, state } = useWontumPlayer({
@@ -182,7 +186,7 @@ function CustomPlayer() {
 ### React Context Provider
 
 ```tsx
-import { WontumPlayerProvider, useWontumPlayerContext } from "@wontum/player"
+import { WontumPlayerProvider, useWontumPlayerContext } from "@obipascal/player"
 
 function App() {
 	return (
@@ -213,43 +217,165 @@ function ControlPanel() {
 
 ## 🔒 CloudFront & S3 Integration
 
-### CloudFront with Signed Cookies (Recommended)
+This player supports **three video hosting scenarios**. Choose the one that fits your needs:
 
-For secure video delivery, use CloudFront with signed cookies:
+### Scenario 1: Public Videos (Easiest - No Authentication Required)
 
-```typescript
-import { WontumPlayer } from "@wontum/player"
+**When to use:** Your videos are publicly accessible and don't require user authentication.
+
+**Setup:** Just provide the video URL!
 
-// Your backend sets signed cookies for CloudFront
-// Cookie names: CloudFront-Policy, CloudFront-Signature, CloudFront-Key-Pair-Id
+```typescript
+import { WontumPlayer } from "@obipascal/player"
 
 const player = new WontumPlayer({
-	src: "https://media.yourdomain.com/video/playlist.m3u8",
+	src: "https://d1234567890.cloudfront.net/video/playlist.m3u8",
 	container: "#player",
-	s3Config: {
-		cloudfront: {
-			domain: "media.yourdomain.com",
-			// Cookies are automatically sent by browser
-		},
-	},
 })
 ```
 
-### CloudFront Signed Cookie Setup (Backend)
+✅ **That's it!** No backend needed. Works for public S3 buckets or CloudFront distributions.
+
+---
+
+### Scenario 2: Private Videos with CloudFront Signed Cookies (Recommended)
+
+**When to use:** You want to restrict video access to authorized users (e.g., paid courses, premium content).
+
+**How it works:**
+
+1. User logs into your app
+2. Your backend verifies the user and sets CloudFront signed cookies
+3. Player automatically sends these cookies with every video request
+4. CloudFront checks the cookies and allows/denies access
+
+**Frontend Setup:**
 
 ```typescript
-// Node.js backend example
-import { CloudFrontClient } from "@aws-sdk/client-cloudfront"
+import { WontumPlayer } from "@obipascal/player"
+
+// STEP 1: Call your backend to set signed cookies BEFORE creating the player
+async function initializePlayer() {
+	// This endpoint sets CloudFront cookies in the browser
+	await fetch("/api/auth/video-access", {
+		credentials: "include", // Important: include cookies
+	})
+
+	// STEP 2: Create player - it will automatically use the cookies
+	const player = new WontumPlayer({
+		src: "https://media.yourdomain.com/videos/lesson-1/playlist.m3u8",
+		container: "#player",
+		s3Config: {
+			cloudFrontDomains: ["media.yourdomain.com"], // Your CloudFront domain
+			signUrl: async (url) => {
+				// This function is called when player needs to access a video
+				// Call your backend to refresh/set cookies if needed
+				const response = await fetch("/api/auth/sign-url", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					credentials: "include",
+					body: JSON.stringify({ url }),
+				})
+
+				if (!response.ok) {
+					throw new Error("Failed to authenticate video access")
+				}
+
+				// Backend sets cookies, return the URL
+				return url
+			},
+		},
+	})
+}
+
+initializePlayer()
+```
+
+**Backend Setup (Node.js/Express):**
+
+```typescript
+import express from "express"
 import { getSignedCookies } from "@aws-sdk/cloudfront-signer"
+import fs from "fs"
+
+const app = express()
 
-app.get("/api/video-auth", async (req, res) => {
+// STEP 1: Create endpoint that sets CloudFront signed cookies
+app.get("/api/auth/video-access", (req, res) => {
+	// Check if user is logged in (your authentication logic)
+	if (!req.user) {
+		return res.status(401).json({ error: "Not authenticated" })
+	}
+
+	// Define what resources user can access
+	const policy = {
+		Statement: [
+			{
+				Resource: "https://media.yourdomain.com/*", // All videos on this domain
+				Condition: {
+					DateLessThan: {
+						"AWS:EpochTime": Math.floor(Date.now() / 1000) + 3600, // Expires in 1 hour
+					},
+				},
+			},
+		],
+	}
+
+	// Generate CloudFront signed cookies
+	const cookies = getSignedCookies({
+		keyPairId: process.env.CLOUDFRONT_KEY_PAIR_ID!, // Your CloudFront key pair ID
+		privateKey: fs.readFileSync("./cloudfront-private-key.pem", "utf8"), // Your private key
+		policy: JSON.stringify(policy),
+	})
+
+	// Set the three required cookies
+	res.cookie("CloudFront-Policy", cookies["CloudFront-Policy"], {
+		domain: ".yourdomain.com", // Use your domain
+		path: "/",
+		secure: true, // HTTPS only
+		httpOnly: true, // Prevent JavaScript access
+		sameSite: "none",
+	})
+
+	res.cookie("CloudFront-Signature", cookies["CloudFront-Signature"], {
+		domain: ".yourdomain.com",
+		path: "/",
+		secure: true,
+		httpOnly: true,
+		sameSite: "none",
+	})
+
+	res.cookie("CloudFront-Key-Pair-Id", cookies["CloudFront-Key-Pair-Id"], {
+		domain: ".yourdomain.com",
+		path: "/",
+		secure: true,
+		httpOnly: true,
+		sameSite: "none",
+	})
+
+	res.json({ success: true })
+})
+
+// STEP 2: Optional endpoint for on-demand signing (called by signUrl function)
+app.post("/api/auth/sign-url", (req, res) => {
+	const { url } = req.body
+
+	// Verify user is authorized
+	if (!req.user) {
+		return res.status(401).json({ error: "Not authenticated" })
+	}
+
+	// You can add additional authorization logic here
+	// For example, check if user has access to this specific video
+
+	// Refresh cookies (same code as above)
 	const policy = {
 		Statement: [
 			{
 				Resource: "https://media.yourdomain.com/*",
 				Condition: {
 					DateLessThan: {
-						"AWS:EpochTime": Math.floor(Date.now() / 1000) + 3600, // 1 hour
+						"AWS:EpochTime": Math.floor(Date.now() / 1000) + 3600,
 					},
 				},
 			},
@@ -257,43 +383,142 @@ app.get("/api/video-auth", async (req, res) => {
 	}
 
 	const cookies = getSignedCookies({
-		keyPairId: process.env.CLOUDFRONT_KEY_PAIR_ID,
-		privateKey: process.env.CLOUDFRONT_PRIVATE_KEY,
+		keyPairId: process.env.CLOUDFRONT_KEY_PAIR_ID!,
+		privateKey: fs.readFileSync("./cloudfront-private-key.pem", "utf8"),
 		policy: JSON.stringify(policy),
 	})
 
-	// Set cookies
 	res.cookie("CloudFront-Policy", cookies["CloudFront-Policy"], {
 		domain: ".yourdomain.com",
+		path: "/",
 		secure: true,
 		httpOnly: true,
+		sameSite: "none",
 	})
+
 	res.cookie("CloudFront-Signature", cookies["CloudFront-Signature"], {
 		domain: ".yourdomain.com",
+		path: "/",
 		secure: true,
 		httpOnly: true,
+		sameSite: "none",
 	})
+
 	res.cookie("CloudFront-Key-Pair-Id", cookies["CloudFront-Key-Pair-Id"], {
 		domain: ".yourdomain.com",
+		path: "/",
 		secure: true,
 		httpOnly: true,
+		sameSite: "none",
 	})
 
 	res.json({ success: true })
 })
 ```
 
-### Public S3/CloudFront (No Authentication)
+**AWS CloudFront Setup:**
+
+1. Create a CloudFront key pair in AWS Console → CloudFront → Key pairs
+2. Download the private key file
+3. Set up environment variables:
+   ```bash
+   CLOUDFRONT_KEY_PAIR_ID=APKA...
+   ```
+4. Configure your CloudFront distribution to require signed cookies
+
+---
 
-For public videos:
+### Scenario 3: Private S3 Videos with Presigned URLs
+
+**When to use:** Videos are in private S3 buckets without CloudFront.
+
+**How it works:**
+
+1. Your backend generates temporary presigned URLs for S3 objects
+2. Player uses these URLs to access videos
+3. URLs expire after a set time (e.g., 1 hour)
+
+**Frontend Setup:**
 
 ```typescript
+import { WontumPlayer } from "@obipascal/player"
+
 const player = new WontumPlayer({
-	src: "https://d1234567890.cloudfront.net/video/playlist.m3u8",
+	src: "s3://my-bucket/videos/lesson-1/playlist.m3u8", // S3 URI
 	container: "#player",
+	s3Config: {
+		getPresignedUrl: async (s3Key) => {
+			// Call your backend to generate presigned URL
+			const response = await fetch("/api/s3/presigned-url", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ key: s3Key }),
+			})
+
+			if (!response.ok) {
+				throw new Error("Failed to get presigned URL")
+			}
+
+			const data = await response.json()
+			return data.url // Return the presigned URL
+		},
+	},
 })
 ```
 
+**Backend Setup (Node.js):**
+
+```typescript
+import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3"
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner"
+
+const s3Client = new S3Client({
+	region: "us-east-1",
+	credentials: {
+		accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+		secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+	},
+})
+
+app.post("/api/s3/presigned-url", async (req, res) => {
+	const { key } = req.body
+
+	// Verify user is authorized to access this video
+	if (!req.user) {
+		return res.status(401).json({ error: "Not authenticated" })
+	}
+
+	try {
+		// Generate presigned URL
+		const command = new GetObjectCommand({
+			Bucket: "my-bucket",
+			Key: key, // e.g., "videos/lesson-1/playlist.m3u8"
+		})
+
+		const url = await getSignedUrl(s3Client, command, {
+			expiresIn: 3600, // URL valid for 1 hour
+		})
+
+		res.json({ url })
+	} catch (error) {
+		console.error("Error generating presigned URL:", error)
+		res.status(500).json({ error: "Failed to generate presigned URL" })
+	}
+})
+```
+
+---
+
+### Which Method Should I Use?
+
+| Method                 | Best For                                       | Complexity  | Performance  |
+| ---------------------- | ---------------------------------------------- | ----------- | ------------ |
+| **Public Videos**      | Free content, marketing videos                 | ⭐ Easy     | ⚡ Fast      |
+| **CloudFront Cookies** | ⭐ **Recommended** for paid courses, premium   | ⭐⭐ Medium | ⚡⚡ Fastest |
+| **S3 Presigned URLs**  | Direct S3 access, simple private video hosting | ⭐⭐ Medium | ⚡ Good      |
+
+💡 **Tip:** Use CloudFront with signed cookies for production. It's more secure and performant for HLS videos (which have many file segments).
+
 ## 📝 Subtitle Support
 
 ### Adding Subtitles
@@ -568,15 +793,7 @@ function CustomPlayer() {
 Wontum Player comes with 7 beautiful pre-made themes:
 
 ```typescript
-import {
-	netflixTheme,
-	youtubeTheme,
-	modernTheme,
-	greenTheme,
-	cyberpunkTheme,
-	pastelTheme,
-	educationTheme,
-} from "@wontum/player"
+import { netflixTheme, youtubeTheme, modernTheme, greenTheme, cyberpunkTheme, pastelTheme, educationTheme } from "@obipascal/player"
 
 const player = new WontumPlayer({
 	src: "https://media.example.com/video/playlist.m3u8",
@@ -586,6 +803,7 @@ const player = new WontumPlayer({
 ```
 
 **Available Themes:**
+
 - `netflixTheme()` - Netflix-inspired red and black
 - `youtubeTheme()` - YouTube-inspired red and white
 - `modernTheme()` - Modern blue gradient
@@ -620,7 +838,7 @@ const player = new WontumPlayer({
 Quick brand color presets:
 
 ```typescript
-import { BrandPresets } from "@wontum/player"
+import { BrandPresets } from "@obipascal/player"
 
 const player = new WontumPlayer({
 	src: "https://media.example.com/video/playlist.m3u8",
@@ -634,6 +852,7 @@ const player = new WontumPlayer({
 ```
 
 **Available Brand Colors:**
+
 - `blue`, `lightBlue`, `darkBlue`
 - `red`, `lightRed`, `darkRed`
 - `green`, `lightGreen`, `darkGreen`
@@ -788,6 +1007,7 @@ For detailed API documentation including all methods, events, types, and configu
 ### Quick Reference
 
 **Player Methods:**
+
 - **Playback:** `play()`, `pause()`, `seek(time)`, `skipForward(seconds)`, `skipBackward(seconds)`
 - **Volume:** `setVolume(level)`, `mute()`, `unmute()`
 - **Subtitles:** `enableSubtitles(index)`, `disableSubtitles()`, `toggleSubtitles()`, `getSubtitleTracks()`, `areSubtitlesEnabled()`
@@ -798,6 +1018,7 @@ For detailed API documentation including all methods, events, types, and configu
 - **Lifecycle:** `destroy()`
 
 **Events (25 total):**
+
 - **Playback:** `play`, `pause`, `ended`, `timeupdate`, `durationchange`
 - **Loading:** `loadstart`, `loadedmetadata`, `loadeddata`, `canplay`, `canplaythrough`
 - **Buffering:** `waiting`, `playing`, `stalled`, `suspend`, `abort`
@@ -812,13 +1033,13 @@ For detailed API documentation including all methods, events, types, and configu
 
 ## 🌐 Browser Support
 
-| Browser | Minimum Version |
-|---------|----------------|
-| Chrome | Latest 2 versions |
-| Edge | Latest 2 versions |
-| Firefox | Latest 2 versions |
-| Safari | Latest 2 versions |
-| iOS Safari | iOS 12+ |
+| Browser        | Minimum Version   |
+| -------------- | ----------------- |
+| Chrome         | Latest 2 versions |
+| Edge           | Latest 2 versions |
+| Firefox        | Latest 2 versions |
+| Safari         | Latest 2 versions |
+| iOS Safari     | iOS 12+           |
 | Android Chrome | Latest 2 versions |
 
 **Note:** HLS playback requires HLS.js support. Native HLS playback is supported on Safari.

package/dist/examples/cloudfront-example.d.ts

@@ -14,7 +14,7 @@ export declare function cloudFrontWithRetryExample(): WontumPlayer;
  * Note: This is a code example as a string. For actual React usage,
  * copy this to a .tsx file in your project.
  */
-export declare const ReactCloudFrontPlayerExample = "\nimport React from \"react\"\nimport { WontumPlayerReact } from \"@wontum/player\"\n\nexport function CloudFrontPlayer({ videoUrl, userId }: { videoUrl: string; userId: string }) {\n\t// Sign URL function\n\tasync function signUrl(url: string): Promise<string> {\n\t\tconst response = await fetch(\"/api/cloudfront/sign\", {\n\t\t\tmethod: \"POST\",\n\t\t\theaders: {\n\t\t\t\t\"Content-Type\": \"application/json\",\n\t\t\t},\n\t\t\tbody: JSON.stringify({ url, userId }),\n\t\t\tcredentials: \"include\",\n\t\t})\n\n\t\tconst data = await response.json()\n\t\treturn data.url\n\t}\n\n\treturn (\n\t\t<WontumPlayerReact\n\t\t\tsrc={videoUrl}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"500px\"\n\t\t\ts3Config={{\n\t\t\t\tsignUrl,\n\t\t\t\tcloudFrontDomains: [\"media.domain.com\", \"cdn.domain.com\"], // Multiple domains\n\t\t\t}}\n\t\t\tanalytics={{\n\t\t\t\tenabled: true,\n\t\t\t\tuserId,\n\t\t\t\tvideoId: videoUrl,\n\t\t\t}}\n\t\t\tonError={(error) => {\n\t\t\t\tconsole.error(\"Player error:\", error)\n\t\t\t\t// Handle signing errors\n\t\t\t\tif (error?.message?.includes(\"sign\")) {\n\t\t\t\t\talert(\"Failed to authenticate video. Please refresh and try again.\")\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n";
+export declare const ReactCloudFrontPlayerExample = "\nimport React from \"react\"\nimport { WontumPlayerReact } from \"@obipascal/player\"\n\nexport function CloudFrontPlayer({ videoUrl, userId }: { videoUrl: string; userId: string }) {\n\t// Sign URL function\n\tasync function signUrl(url: string): Promise<string> {\n\t\tconst response = await fetch(\"/api/cloudfront/sign\", {\n\t\t\tmethod: \"POST\",\n\t\t\theaders: {\n\t\t\t\t\"Content-Type\": \"application/json\",\n\t\t\t},\n\t\t\tbody: JSON.stringify({ url, userId }),\n\t\t\tcredentials: \"include\",\n\t\t})\n\n\t\tconst data = await response.json()\n\t\treturn data.url\n\t}\n\n\treturn (\n\t\t<WontumPlayerReact\n\t\t\tsrc={videoUrl}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"500px\"\n\t\t\ts3Config={{\n\t\t\t\tsignUrl,\n\t\t\t\tcloudFrontDomains: [\"media.domain.com\", \"cdn.domain.com\"], // Multiple domains\n\t\t\t}}\n\t\t\tanalytics={{\n\t\t\t\tenabled: true,\n\t\t\t\tuserId,\n\t\t\t\tvideoId: videoUrl,\n\t\t\t}}\n\t\t\tonError={(error) => {\n\t\t\t\tconsole.error(\"Player error:\", error)\n\t\t\t\t// Handle signing errors\n\t\t\t\tif (error?.message?.includes(\"sign\")) {\n\t\t\t\t\talert(\"Failed to authenticate video. Please refresh and try again.\")\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n";
 /**
  * Example 4: Backend Implementation (Node.js/Express)
  */

package/dist/examples/custom-themes.d.ts

@@ -31,7 +31,7 @@ export declare function educationTheme(): WontumPlayer;
 /**
  * React Example with Custom Theme
  */
-export declare const ReactCustomThemeExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@wontum/player';\n\nfunction CustomStyledPlayer() {\n  return (\n    <WontumPlayerReact\n      src=\"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8\"\n      theme={{\n        primaryColor: '#ff6b6b',        // Coral red\n        accentColor: '#ee5a6f',\n        fontFamily: 'Helvetica, Arial, sans-serif',\n        controlsBackground: 'linear-gradient(to top, rgba(0,0,0,0.85), transparent)',\n        buttonHoverBg: 'rgba(255, 107, 107, 0.25)',\n        progressHeight: '5px',\n        borderRadius: '8px'\n      }}\n    />\n  );\n}\n";
+export declare const ReactCustomThemeExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@obipascal/player';\n\nfunction CustomStyledPlayer() {\n  return (\n    <WontumPlayerReact\n      src=\"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8\"\n      theme={{\n        primaryColor: '#ff6b6b',        // Coral red\n        accentColor: '#ee5a6f',\n        fontFamily: 'Helvetica, Arial, sans-serif',\n        controlsBackground: 'linear-gradient(to top, rgba(0,0,0,0.85), transparent)',\n        buttonHoverBg: 'rgba(255, 107, 107, 0.25)',\n        progressHeight: '5px',\n        borderRadius: '8px'\n      }}\n    />\n  );\n}\n";
 /**
  * All Available Theme Options
  */

package/dist/examples/events-demo.d.ts

@@ -40,7 +40,7 @@ export declare function minimalEventExample(): void;
 /**
  * React example with all events
  */
-export declare const ReactAllEventsExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@wontum/player';\n\nfunction VideoPlayerWithEvents() {\n  return (\n    <WontumPlayerReact\n      src=\"https://media.domain.com/video.m3u8\"\n      \n      {/* Playback Events */}\n      onPlay={(e) => console.log('Play', e)}\n      onPause={(e) => console.log('Pause', e)}\n      onPlaying={(e) => console.log('Playing', e)}\n      onEnded={(e) => console.log('Ended', e)}\n      onTimeupdate={(e) => console.log('Time:', e.data.currentTime)}\n      \n      {/* Seeking */}\n      onSeeking={(e) => console.log('Seeking', e)}\n      onSeeked={(e) => console.log('Seeked', e)}\n      \n      {/* Loading Events */}\n      onLoadstart={(e) => console.log('Load Start', e)}\n      onLoadeddata={(e) => console.log('Loaded Data', e)}\n      onLoadedmetadata={(e) => console.log('Metadata', e)}\n      onCanplay={(e) => console.log('Can Play', e)}\n      onCanplaythrough={(e) => console.log('Can Play Through', e)}\n      onProgress={(e) => console.log('Progress', e)}\n      onWaiting={(e) => console.log('Buffering', e)}\n      onDurationchange={(e) => console.log('Duration', e)}\n      \n      {/* Media State */}\n      onVolumechange={(e) => console.log('Volume', e)}\n      onRatechange={(e) => console.log('Rate', e)}\n      onResize={(e) => console.log('Resize', e)}\n      \n      {/* Network/Error */}\n      onAbort={(e) => console.log('Abort', e)}\n      onEmptied={(e) => console.log('Emptied', e)}\n      onStalled={(e) => console.log('Stalled', e)}\n      onSuspend={(e) => console.log('Suspend', e)}\n      onError={(e) => console.error('Error', e)}\n      \n      {/* Custom Events */}\n      onQualitychange={(e) => console.log('Quality', e)}\n      onFullscreenchange={(e) => console.log('Fullscreen', e)}\n    />\n  );\n}\n";
+export declare const ReactAllEventsExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@obipascal/player';\n\nfunction VideoPlayerWithEvents() {\n  return (\n    <WontumPlayerReact\n      src=\"https://media.domain.com/video.m3u8\"\n      \n      {/* Playback Events */}\n      onPlay={(e) => console.log('Play', e)}\n      onPause={(e) => console.log('Pause', e)}\n      onPlaying={(e) => console.log('Playing', e)}\n      onEnded={(e) => console.log('Ended', e)}\n      onTimeupdate={(e) => console.log('Time:', e.data.currentTime)}\n      \n      {/* Seeking */}\n      onSeeking={(e) => console.log('Seeking', e)}\n      onSeeked={(e) => console.log('Seeked', e)}\n      \n      {/* Loading Events */}\n      onLoadstart={(e) => console.log('Load Start', e)}\n      onLoadeddata={(e) => console.log('Loaded Data', e)}\n      onLoadedmetadata={(e) => console.log('Metadata', e)}\n      onCanplay={(e) => console.log('Can Play', e)}\n      onCanplaythrough={(e) => console.log('Can Play Through', e)}\n      onProgress={(e) => console.log('Progress', e)}\n      onWaiting={(e) => console.log('Buffering', e)}\n      onDurationchange={(e) => console.log('Duration', e)}\n      \n      {/* Media State */}\n      onVolumechange={(e) => console.log('Volume', e)}\n      onRatechange={(e) => console.log('Rate', e)}\n      onResize={(e) => console.log('Resize', e)}\n      \n      {/* Network/Error */}\n      onAbort={(e) => console.log('Abort', e)}\n      onEmptied={(e) => console.log('Emptied', e)}\n      onStalled={(e) => console.log('Stalled', e)}\n      onSuspend={(e) => console.log('Suspend', e)}\n      onError={(e) => console.error('Error', e)}\n      \n      {/* Custom Events */}\n      onQualitychange={(e) => console.log('Quality', e)}\n      onFullscreenchange={(e) => console.log('Fullscreen', e)}\n    />\n  );\n}\n";
 /**
  * Compare with Mux Player events
  */

package/dist/examples/public-stream-test.d.ts

@@ -35,4 +35,4 @@ export declare const htmlExample = "\n<!DOCTYPE html>\n<html>\n<head>\n  <title>
 /**
  * React example with public stream
  */
-export declare const reactPublicStreamExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@wontum/player';\n\nfunction App() {\n  return (\n    <div style={{ width: '100%', height: '600px', background: '#000' }}>\n      <WontumPlayerReact\n        src=\"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8\"\n        autoplay\n        onLoadedmetadata={(e) => console.log('Duration:', e.data.duration)}\n        onPlay={() => console.log('Playing!')}\n        onError={(e) => console.error('Error:', e.data)}\n      />\n    </div>\n  );\n}\n\nexport default App;\n";
+export declare const reactPublicStreamExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@obipascal/player';\n\nfunction App() {\n  return (\n    <div style={{ width: '100%', height: '600px', background: '#000' }}>\n      <WontumPlayerReact\n        src=\"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8\"\n        autoplay\n        onLoadedmetadata={(e) => console.log('Duration:', e.data.duration)}\n        onPlay={() => console.log('Playing!')}\n        onError={(e) => console.error('Error:', e.data)}\n      />\n    </div>\n  );\n}\n\nexport default App;\n";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@obipascal/player",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "A modern HLS video player SDK for educational platforms with S3 integration",
 	"main": "dist/wontum-player.cjs.js",
 	"module": "dist/wontum-player.esm.js",