@obipascal/player 1.0.0 → 1.0.1

package/README.md

@@ -37,13 +37,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 +60,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",
@@ -110,7 +110,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 +146,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 +182,7 @@ function CustomPlayer() {
 ### React Context Provider
 
 ```tsx
-import { WontumPlayerProvider, useWontumPlayerContext } from "@wontum/player"
+import { WontumPlayerProvider, useWontumPlayerContext } from "@obipascal/player"
 
 function App() {
 	return (
@@ -218,7 +218,7 @@ function ControlPanel() {
 For secure video delivery, use CloudFront with signed cookies:
 
 ```typescript
-import { WontumPlayer } from "@wontum/player"
+import { WontumPlayer } from "@obipascal/player"
 
 // Your backend sets signed cookies for CloudFront
 // Cookie names: CloudFront-Policy, CloudFront-Signature, CloudFront-Key-Pair-Id
@@ -576,7 +576,7 @@ import {
 	cyberpunkTheme,
 	pastelTheme,
 	educationTheme,
-} from "@wontum/player"
+} from "@obipascal/player"
 
 const player = new WontumPlayer({
 	src: "https://media.example.com/video/playlist.m3u8",
@@ -620,7 +620,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",

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.1",
 	"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",