@obipascal/player 1.0.6 → 1.0.8

package/README.md

@@ -240,6 +240,7 @@ function VideoPlayer({ videoUrl }: VideoPlayerProps) {
 
 	const s3config: S3Config = {
 		cloudFrontDomains: [url.hostname],
+		withCredentials: true, // Enable cookies for CloudFront signed cookies
 		signUrl: async (resourceUrl: string) => {
 			try {
 				const { data } = await refetch({
@@ -336,6 +337,7 @@ async function initializePlayer() {
 		container: "#player",
 		s3Config: {
 			cloudFrontDomains: ["media.yourdomain.com"], // Your CloudFront domain
+			withCredentials: true, // Enable cookies for all HLS requests (required for CloudFront signed cookies)
 			signUrl: async (url) => {
 				// This function is called when player needs to access a video
 				// Call your backend to refresh/set cookies if needed
@@ -734,9 +736,19 @@ interface WontumPlayerConfig {
 	poster?: string // Poster image URL
 	preload?: "none" | "metadata" | "auto" // Preload strategy
 	theme?: PlayerTheme // Custom theme
-	s3Config?: S3Config // S3 configuration
+	s3Config?: S3Config // S3/CloudFront configuration
 	analytics?: AnalyticsConfig // Analytics configuration
 	hlsConfig?: Partial<any> // HLS.js config override
+	subtitles?: SubtitleTrack[] // Subtitle tracks
+	stickyControls?: boolean // Keep controls always visible
+}
+
+interface S3Config {
+	signUrl?: (url: string) => Promise<string> // Sign URL and set cookies
+	cloudFrontDomains?: string[] // CloudFront domains (e.g., ['media.example.com'])
+	withCredentials?: boolean // Enable cookies for HLS requests (default: false, required for CloudFront signed cookies)
+	region?: string // S3 region
+	endpoint?: string // Custom S3 endpoint
 }
 ```
 
@@ -758,11 +770,17 @@ player.setPlaybackRate(rate: number): void  // 0.5, 1, 1.5, 2, etc.
 
 // Quality control
 player.setQuality(qualityIndex: number): void
+player.getQualities(): QualityLevel[]
 
 // Fullscreen
 player.enterFullscreen(): void
 player.exitFullscreen(): void
 
+// Picture-in-Picture
+player.enterPictureInPicture(): Promise<void>
+player.exitPictureInPicture(): Promise<void>
+player.togglePictureInPicture(): Promise<void>
+
 // State
 player.getState(): PlayerState
 
@@ -792,6 +810,8 @@ type PlayerEventType =
 	| "error"
 	| "qualitychange"
 	| "fullscreenchange"
+	| "pictureinpictureenter"
+	| "pictureinpictureexit"
 ```
 
 ### React Components
@@ -994,6 +1014,15 @@ player.on("qualitychange", (event) => {
 	console.log("Quality changed to:", event.data.quality)
 })
 
+// Picture-in-Picture events
+player.on("pictureinpictureenter", () => {
+	console.log("Entered Picture-in-Picture mode")
+})
+
+player.on("pictureinpictureexit", () => {
+	console.log("Exited Picture-in-Picture mode")
+})
+
 // Buffer events
 player.on("waiting", () => console.log("Buffering..."))
 player.on("canplay", () => console.log("Ready to play"))
@@ -1065,10 +1094,132 @@ player.setQuality(2) // Set to quality index 2
 player.enterFullscreen()
 player.exitFullscreen()
 
+// Picture-in-Picture
+await player.enterPictureInPicture()
+await player.exitPictureInPicture()
+await player.togglePictureInPicture()
+
 // Cleanup
 player.destroy() // Remove player and clean up resources
 ```
 
+### Picture-in-Picture Mode
+
+Enable floating video that stays on top while users work in other apps:
+
+```typescript
+const player = new WontumPlayer({
+	src: "https://example.com/video.m3u8",
+	container: "#player",
+})
+
+// Enter PiP mode
+await player.enterPictureInPicture()
+
+// Listen for PiP events
+player.on("pictureinpictureenter", () => {
+	console.log("Video is now floating!")
+})
+
+player.on("pictureinpictureexit", () => {
+	console.log("Back to normal mode")
+})
+
+// Custom button to toggle PiP
+const pipButton = document.getElementById("pip-btn")
+pipButton.addEventListener("click", async () => {
+	await player.togglePictureInPicture()
+})
+```
+
+**Note:** Picture-in-Picture is supported in most modern browsers. The player includes a built-in PiP button in the controls.
+
+### File Information Utility
+
+The SDK includes a `WontumFileInfo` utility class to extract metadata from video files before uploading or processing them.
+
+```typescript
+import { WontumFileInfo } from "@obipascal/player"
+
+// Example: File input handling
+const fileInput = document.querySelector<HTMLInputElement>("#video-upload")
+
+fileInput.addEventListener("change", async (event) => {
+	const file = event.target.files?.[0]
+	if (!file) return
+
+	try {
+		// Create instance (validates it's a video file)
+		const videoInfo = new WontumFileInfo(file)
+
+		// Extract metadata
+		await videoInfo.extract()
+
+		// Access properties
+		console.log("Video Information:")
+		console.log("- Width:", videoInfo.width) // e.g., 1920
+		console.log("- Height:", videoInfo.height) // e.g., 1080
+		console.log("- Aspect Ratio:", videoInfo.aspectRatio) // e.g., "16:9"
+		console.log("- Quality:", videoInfo.quality) // e.g., "Full HD (1080p)"
+		console.log("- Duration (raw):", videoInfo.durationInSeconds, "seconds") // e.g., 125.5
+		console.log("- Formatted Duration:", videoInfo.durationFormatted) // e.g., "02:05"
+		console.log("- File Size (raw):", videoInfo.sizeInBytes, "bytes") // e.g., 52428800
+		console.log("- Formatted Size:", videoInfo.sizeFormatted) // e.g., "50 MB"
+		console.log("- MIME Type:", videoInfo.mimeType) // e.g., "video/mp4"
+		console.log("- File Name:", videoInfo.fileName) // e.g., "my-video.mp4"
+		console.log("- Extension:", videoInfo.fileExtension) // e.g., ".mp4"
+		console.log("- Bitrate:", videoInfo.bitrate, "kbps") // e.g., 3500
+
+		// Get all info as object
+		const allInfo = videoInfo.getInfo()
+		console.log(allInfo)
+
+		// Clean up when done
+		videoInfo.destroy()
+	} catch (error) {
+		console.error("Error extracting video info:", error.message)
+		// Throws error if file is not a video
+	}
+})
+```
+
+#### WontumFileInfo API
+
+**Constructor:**
+
+```typescript
+new WontumFileInfo(file: File)
+```
+
+Throws an error if the file is not a valid video file.
+
+**Methods:**
+
+- `extract(): Promise<VideoFileInfo>` - Extracts metadata from the video file
+- `getInfo(): VideoFileInfo | null` - Returns the extracted information object
+- `destroy(): void` - Cleans up resources
+
+**Properties (available after calling `extract()`):**
+
+- `width: number` - Video width in pixels
+- `height: number` - Video height in pixels
+- `aspectRatio: string` - Aspect ratio (e.g., "16:9", "4:3", "21:9")
+- `quality: string` - Quality description (e.g., "4K (2160p)", "Full HD (1080p)")
+- `size: number` - File size in bytes (raw value for computation)
+- `sizeInBytes: number` - Alias for size (raw value for computation)
+- `sizeFormatted: string` - Human-readable size (e.g., "50 MB")
+- `duration: number` - Duration in seconds (raw value for computation)
+- `durationInSeconds: number` - Alias for duration (raw value for computation)
+- `durationFormatted: string` - Formatted duration (e.g., "01:23:45")
+- `mimeType: string` - MIME type (e.g., "video/mp4")
+- `fileName: string` - Original file name
+- `fileExtension: string` - File extension (e.g., ".mp4")
+- `bitrate: number | undefined` - Estimated bitrate in kbps
+
+**Supported Video Formats:**
+
+`.mp4`, `.webm`, `.ogg`, `.mov`, `.avi`, `.mkv`, `.flv`, `.wmv`, `.m4v`, `.3gp`, `.ts`, `.m3u8`
+
 ## 📋 Complete API Reference
 
 For detailed API documentation including all methods, events, types, and configuration options, see **[API-REFERENCE.md](./API-REFERENCE.md)**.
@@ -1083,6 +1234,7 @@ For detailed API documentation including all methods, events, types, and configu
 - **Quality:** `setQuality(index)`, `getQualities()`
 - **Playback Rate:** `setPlaybackRate(rate)`
 - **Fullscreen:** `enterFullscreen()`, `exitFullscreen()`
+- **Picture-in-Picture:** `enterPictureInPicture()`, `exitPictureInPicture()`, `togglePictureInPicture()`
 - **State:** `getState()`, `getCurrentTime()`, `getDuration()`
 - **Lifecycle:** `destroy()`
 
@@ -1129,9 +1281,9 @@ Contributions are welcome! Please follow these steps:
 
 ## 💬 Support
 
-- **Issues:** [GitHub Issues](https://github.com/yourorg/wontum-player/issues)
-- **Discussions:** [GitHub Discussions](https://github.com/yourorg/wontum-player/discussions)
-- **Email:** support@wontum.com
+- **Issues:** [GitHub Issues](https://github.com/obipascal/wontum-player/issues)
+- **Discussions:** [GitHub Discussions](https://github.com/obipascal/wontum-player/discussions)
+- **Email:** pascalobi83@gmail.com
 
 ## 🙏 Acknowledgments
 

package/dist/src/file-info.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Video file information extractor
+ * Extracts metadata from video files (width, height, duration, size, etc.)
+ */
+export interface VideoFileInfo {
+    width: number;
+    height: number;
+    aspectRatio: string;
+    size: number;
+    sizeInBytes: number;
+    sizeFormatted: string;
+    duration: number;
+    durationInSeconds: number;
+    durationFormatted: string;
+    mimeType: string;
+    fileName: string;
+    fileExtension: string;
+    bitrate?: number;
+    frameRate?: number;
+    videoCodec?: string;
+    audioCodec?: string;
+}
+export declare class WontumFileInfo {
+    private file;
+    private videoElement;
+    private info;
+    constructor(file: File);
+    /**
+     * Check if the file is a valid video file
+     */
+    private isVideoFile;
+    /**
+     * Extract video metadata
+     */
+    extract(): Promise<VideoFileInfo>;
+    /**
+     * Calculate aspect ratio (e.g., "16:9", "4:3")
+     */
+    private calculateAspectRatio;
+    /**
+     * Get Greatest Common Divisor
+     */
+    private getGCD;
+    /**
+     * Format bytes to human-readable size
+     */
+    private formatBytes;
+    /**
+     * Format duration to HH:MM:SS
+     */
+    private formatDuration;
+    /**
+     * Get file extension
+     */
+    private getFileExtension;
+    get width(): number;
+    get height(): number;
+    get aspectRatio(): string;
+    get size(): number;
+    get sizeInBytes(): number;
+    get sizeFormatted(): string;
+    get duration(): number;
+    get durationInSeconds(): number;
+    get durationFormatted(): string;
+    get mimeType(): string;
+    get fileName(): string;
+    get fileExtension(): string;
+    get bitrate(): number | undefined;
+    get quality(): string;
+    /**
+     * Get all information as object
+     */
+    getInfo(): VideoFileInfo | null;
+    /**
+     * Clean up resources
+     */
+    destroy(): void;
+}

package/dist/src/index.d.ts

@@ -2,6 +2,8 @@ export { WontumPlayer } from './player';
 export { Analytics } from './analytics';
 export { S3Handler } from './s3-handler';
 export { UIController } from './ui-controller';
+export { WontumFileInfo } from './file-info';
 export { WontumPlayerReact, useWontumPlayer, WontumPlayerProvider, useWontumPlayerContext } from './react';
 export type { WontumPlayerConfig, PlayerTheme, S3Config, AnalyticsConfig, PlayerState, PlayerEvent, PlayerEventType, AnalyticsEvent, QualityLevel } from './types';
+export type { VideoFileInfo } from './file-info';
 export type { WontumPlayerReactProps } from './react';

package/dist/src/player.d.ts

@@ -36,6 +36,9 @@ export declare class WontumPlayer {
     getQualities(): QualityLevel[];
     enterFullscreen(): void;
     exitFullscreen(): void;
+    enterPictureInPicture(): Promise<void>;
+    exitPictureInPicture(): Promise<void>;
+    togglePictureInPicture(): Promise<void>;
     getState(): PlayerState;
     getVideoElement(): HTMLVideoElement;
     /**

package/dist/src/types.d.ts

@@ -45,6 +45,8 @@ export interface S3Config {
     getPresignedUrl?: (key: string) => Promise<string>;
     /** CloudFront domain patterns to match (e.g., ['media.domain.com']) */
     cloudFrontDomains?: string[];
+    /** Enable credentials (cookies) for HLS requests - required for CloudFront signed cookies */
+    withCredentials?: boolean;
     /** S3 bucket region */
     region?: string;
     /** Custom S3 endpoint */
@@ -82,7 +84,7 @@ export interface PlayerState {
 /**
  * Player events (compatible with Mux Player and HTML5 MediaElement events)
  */
-export type PlayerEventType = "play" | "pause" | "playing" | "ended" | "timeupdate" | "volumechange" | "ratechange" | "seeked" | "seeking" | "waiting" | "loadstart" | "loadeddata" | "loadedmetadata" | "canplay" | "canplaythrough" | "durationchange" | "progress" | "error" | "abort" | "emptied" | "stalled" | "suspend" | "qualitychange" | "fullscreenchange" | "resize";
+export type PlayerEventType = "play" | "pause" | "playing" | "ended" | "timeupdate" | "volumechange" | "ratechange" | "seeked" | "seeking" | "waiting" | "loadstart" | "loadeddata" | "loadedmetadata" | "canplay" | "canplaythrough" | "durationchange" | "progress" | "error" | "abort" | "emptied" | "stalled" | "suspend" | "qualitychange" | "fullscreenchange" | "pictureinpictureenter" | "pictureinpictureexit" | "resize";
 export interface PlayerEvent {
     type: PlayerEventType;
     data?: any;

package/dist/src/ui-controller.d.ts

@@ -13,12 +13,15 @@ export declare class UIController {
     private skipBackwardButton;
     private skipForwardButton;
     private volumeButton;
+    private volumeContainer;
     private fullscreenButton;
+    private pipButton;
     private settingsButton;
     private volumeSlider;
     private progressInput;
     private hideControlsTimeout;
     private stickyControls;
+    private isVolumeSliderActive;
     constructor(container: HTMLElement, player: WontumPlayer);
     private injectStyles;
     private createProgressBar;
@@ -38,6 +41,7 @@ export declare class UIController {
     private getVolumeIcon;
     private getMutedIcon;
     private getFullscreenIcon;
+    private getPipIcon;
     private getSkipBackwardIcon;
     private getSkipForwardIcon;
     private getSettingsIcon;