@therealtinhtute/baroiplayer 1.2.0 → 1.2.1

package/package.json

@@ -1,18 +1,23 @@
 {
 	"name": "@therealtinhtute/baroiplayer",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"private": false,
 	"type": "module",
 	"description": "A customizable media player component library for React",
 	"sideEffects": false,
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
+			"development": {
+				"types": "./src/index.ts",
+				"default": "./src/index.ts"
+			},
+			"types": "./src/index.ts",
 			"import": "./dist/index.mjs",
-			"require": "./dist/index.js"
+			"require": "./dist/index.js",
+			"default": "./dist/index.mjs"
 		},
-		"./globals.css": "./dist/styles/globals.css",
-		"./minimal-player.css": "./dist/styles/minimal-player.css",
+		"./globals.css": "./src/styles/globals.css",
+		"./minimal-player.css": "./src/styles/minimal-player.css",
 		"./dist/*": "./dist/*",
 		"./lib/*": "./src/lib/*.ts",
 		"./components/*": "./src/components/*.tsx",
@@ -21,7 +26,7 @@
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
-	"types": "./dist/index.d.ts",
+	"types": "./src/index.ts",
 	"files": ["dist", "src", "README.md", "LICENSE"],
 	"scripts": {
 		"build": "vite build",
@@ -45,32 +50,33 @@
 		"@radix-ui/react-tooltip": "^1.2.7",
 		"clsx": "^2.1.1",
 		"react-player": "^3.3.1",
-		"tailwind-merge": "^3.3.0",
+		"tailwind-merge": "^3.6.0",
 		"web-vitals": "^4.2.4"
 	},
 	"devDependencies": {
 		"@rp/typescript-config": "workspace:*",
-		"@tailwindcss/postcss": "^4.0.0",
-		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/react": "^16.1.0",
+		"@tailwindcss/postcss": "4.3.2",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/node": "^20",
-		"@types/react": "^19.1.4",
-		"@types/react-dom": "^19.1.5",
-		"@vitejs/plugin-react": "^4.3.4",
-		"@vitest/coverage-v8": "^2.1.8",
-		"babel-plugin-react-compiler": "^19.1.0-rc.3",
-		"jsdom": "^25.0.1",
+		"@types/react": "^19.2.17",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^6.0.3",
+		"@vitest/coverage-v8": "^4.1.10",
+		"babel-plugin-react-compiler": "^1.0.0",
+		"jsdom": "^29.1.1",
 		"lightningcss": "^1.30.1",
 		"rollup-plugin-analyzer": "^4.0.0",
 		"rollup-plugin-bundle-analyzer": "^1.1.0",
-		"size-limit": "^11.1.7",
-		"tailwindcss": "^4.0.0",
+		"@size-limit/file": "^12.1.0",
+		"size-limit": "^12.1.0",
+		"tailwindcss": "4.3.2",
 		"ts-morph": "^27.0.0",
-		"typescript": "^5",
-		"vite": "^6.1.1",
+		"typescript": "^5.9.3",
+		"vite": "^8.1.4",
 		"vite-bundle-analyzer": "^0.13.1",
-		"vitest": "^2.1.8"
+		"vitest": "^4.1.10"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
@@ -105,6 +111,6 @@
 		"url": "https://github.com/ryanphanrp/baroiplayer/issues"
 	},
 	"engines": {
-		"node": ">=18.0.0"
+		"node": ">=20.19.0"
 	}
 }

package/src/components/AnimateLoading.tsx

@@ -3,20 +3,24 @@
 import React, { useState, useEffect } from "react"
 import { cn } from "../lib/utils"
 
-// Try to import the GIF using direct import for better compatibility
-let monaLoadingGif: string | undefined
-
-// Import the GIF statically for bundling - this will be handled by Vite
-// @ts-ignore - Vite handles this import
+// Import the GIF statically for bundling (Vite / webpack may yield string or { src })
 import monaGifSrc from "../assets/mona-loading.gif"
 
-try {
-	monaLoadingGif = monaGifSrc
-} catch {
-	// GIF import failed, will use fallback
-	monaLoadingGif = undefined
+function resolveAssetUrl(src: unknown): string | undefined {
+	if (typeof src === "string" && src.length > 0) return src
+	if (
+		src &&
+		typeof src === "object" &&
+		"src" in src &&
+		typeof (src as { src: unknown }).src === "string"
+	) {
+		return (src as { src: string }).src
+	}
+	return undefined
 }
 
+const monaLoadingGif = resolveAssetUrl(monaGifSrc)
+
 interface AnimateLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
 	loadingText?: string
 	gifSrc?: string

package/src/components/examples/loading-states-demo.tsx

@@ -82,8 +82,7 @@ export function LoadingStatesDemo() {
 
 					<div className="aspect-video overflow-hidden rounded-lg bg-black">
 						<SimpleMinimalPlayer
-							src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-							poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+							src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
 							crossOrigin="anonymous"
 							showLoadingState={true}
 							loadingComponent={showCustomLoading ? CustomLoadingComponent : undefined}

package/src/components/examples/react-19-demo.tsx

@@ -270,21 +270,17 @@ function PerformanceDebugPanel({
 // Example usage component
 export function React19DemoExample() {
 	const [currentSrc, setCurrentSrc] = React.useState(
-		"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+		"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
 	)
 
 	const videoSources = [
 		{
-			src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-			title: "Big Buck Bunny",
-			poster:
-				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+			src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+			title: "Flower (MDN)"
 		},
 		{
-			src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-			title: "Elephants Dream",
-			poster:
-				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
+			src: "https://www.w3schools.com/html/mov_bbb.mp4",
+			title: "Big Buck Bunny"
 		}
 	]
 
@@ -320,7 +316,7 @@ export function React19DemoExample() {
 			{/* Enhanced Media Player */}
 			<React19MediaPlayerDemo
 				src={currentSrc}
-				poster={currentVideo.poster}
+				poster={undefined}
 				mediaId={`demo-${currentSrc}`}
 				className="w-full"
 			/>

package/src/components/examples/volume-orientation-demo.tsx

@@ -41,8 +41,7 @@ export function VolumeOrientationDemo() {
 				{/* Demo Player */}
 				<div className="aspect-video overflow-hidden rounded-lg bg-black">
 					<SimpleMinimalPlayer
-						src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-						poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+						src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
 						crossOrigin="anonymous"
 						className="h-full w-full"
 						volumeOrientation={orientation}

package/src/components/ui/blur-poster.tsx

@@ -9,11 +9,11 @@ interface BlurPosterProps {
 	transitionDuration?: number
 }
 
-const intensityClasses = {
-	low: "blur-sm",
-	medium: "blur-md",
-	high: "blur-lg"
-}
+const intensityBlurPx = {
+	low: "8px",
+	medium: "16px",
+	high: "32px"
+} as const
 
 const BlurPosterComponent = memo(function BlurPoster({
 	src,
@@ -24,15 +24,16 @@ const BlurPosterComponent = memo(function BlurPoster({
 }: BlurPosterProps) {
 	return (
 		<div
-			className={cn(
-				"relative overflow-hidden bg-black/20",
-				"before:absolute before:inset-0 before:bg-center before:bg-cover before:opacity-100",
-				`before:[background-image:url('${src}')]`,
-				`before:[filter:blur(${intensity === "low" ? "8px" : intensity === "medium" ? "16px" : "32px"})]`,
-				className
-			)}
+			className={cn("relative overflow-hidden bg-black/20", className)}
 			aria-label={alt}
 			role="img">
+			<div
+				className="absolute inset-0 bg-center bg-cover opacity-100"
+				style={{
+					backgroundImage: `url('${src}')`,
+					filter: `blur(${intensityBlurPx[intensity]})`
+				}}
+			/>
 			<div
 				className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"
 				style={{ transitionDuration: `${transitionDuration}ms` }}
@@ -75,10 +76,12 @@ export const BlurPosterWithPlaceholder = memo(function BlurPosterWithPlaceholder
 					<div
 						className={cn(
 							"absolute inset-0 bg-center bg-cover opacity-0 transition-opacity duration-500",
-							!isLoading && "opacity-100",
-							`[background-image:url('${src}')]`,
-							`[filter:blur(${intensity === "low" ? "8px" : intensity === "medium" ? "16px" : "32px"})]`
+							!isLoading && "opacity-100"
 						)}
+						style={{
+							backgroundImage: `url('${src}')`,
+							filter: `blur(${intensityBlurPx[intensity]})`
+						}}
 						aria-hidden="true"
 					/>
 				</>

package/src/components/variants/minimal/components/VideoElement.tsx

@@ -20,11 +20,13 @@ export const VideoElement = function VideoElement({
 	onTogglePlay
 }: VideoElementProps) {
 	return (
+		// crossOrigin must be applied before src so the media request is CORS-enabled
+		// (required for canvas screenshot / frame capture).
 		<video
 			ref={videoRef}
+			crossOrigin={crossOrigin}
 			src={src}
 			poster={poster}
-			crossOrigin={crossOrigin}
 			className="h-full w-full object-contain"
 			onClick={onTogglePlay}>
 			{subtitleSrc && <track kind="subtitles" src={subtitleSrc} default={subtitlesEnabled} />}

package/src/core/performance/media-loading-optimizer.ts

@@ -356,7 +356,8 @@ export class MediaLoadingOptimizer {
 			reader.releaseLock()
 		}
 
-		return new Blob(chunks)
+		// TS 5.9+: Uint8Array generic buffer typing is stricter than BlobPart
+		return new Blob(chunks as BlobPart[])
 	}
 
 	// Monitor loading progress and update metrics

package/src/hooks/useScreenshot.ts

@@ -1,61 +1,77 @@
 import { useCallback } from "react"
 
+function isCanvasTaintError(error: unknown): boolean {
+	if (error instanceof DOMException && error.name === "SecurityError") return true
+	if (error instanceof Error && /tainted/i.test(error.message)) return true
+	return false
+}
+
+/**
+ * Capture the current video frame.
+ * Requires the video to be loaded with CORS-friendly headers and
+ * `crossOrigin="anonymous"` (or `use-credentials`) on the element.
+ */
 export function useScreenshot(videoRef: React.RefObject<HTMLVideoElement | null>) {
-	const takeScreenshot = (ctrlKey: boolean = false) => {
-		if (!videoRef.current) return
-
-		const video = videoRef.current
-		const canvas = document.createElement("canvas")
-		canvas.width = video.videoWidth
-		canvas.height = video.videoHeight
-		const ctx = canvas.getContext("2d")
-		if (!ctx) return
-
-		try {
-			// Draw the video frame to canvas
-			ctx.drawImage(video, 0, 0)
-
-			// Try to export the canvas
-			canvas.toBlob((blob) => {
-				if (!blob) {
-					console.error("Failed to create blob from canvas")
-					return
-				}
+	const takeScreenshot = useCallback(
+		(ctrlKey: boolean = false) => {
+			const video = videoRef.current
+			if (!video) return
+
+			if (!video.videoWidth || !video.videoHeight) {
+				console.warn("Screenshot skipped: video frame not ready yet.")
+				return
+			}
 
-				if (ctrlKey) {
-					// Copy to clipboard
-					if (navigator.clipboard && window.ClipboardItem) {
-						const item = new ClipboardItem({ "image/png": blob })
-						navigator.clipboard.write([item]).catch((err) => {
-							console.error("Failed to copy to clipboard:", err)
-						})
-					} else {
-						console.warn("Clipboard API not supported")
+			const canvas = document.createElement("canvas")
+			canvas.width = video.videoWidth
+			canvas.height = video.videoHeight
+			const ctx = canvas.getContext("2d")
+			if (!ctx) return
+
+			try {
+				ctx.drawImage(video, 0, 0)
+
+				// SecurityError throws here when the canvas is tainted by a
+				// cross-origin video without usable CORS + crossOrigin on <video>.
+				canvas.toBlob((blob) => {
+					if (!blob) {
+						console.error("Screenshot failed: could not create image blob.")
+						return
+					}
+
+					if (ctrlKey) {
+						if (navigator.clipboard && window.ClipboardItem) {
+							const item = new ClipboardItem({ "image/png": blob })
+							navigator.clipboard.write([item]).catch((err) => {
+								console.error("Failed to copy screenshot to clipboard:", err)
+							})
+						} else {
+							console.warn("Clipboard API not supported for screenshot copy.")
+						}
+						return
 					}
-				} else {
-					// Download
+
 					const url = URL.createObjectURL(blob)
 					const a = document.createElement("a")
 					a.href = url
 					a.download = `screenshot-${Date.now()}.png`
 					a.click()
 					URL.revokeObjectURL(url)
+				}, "image/png")
+			} catch (error) {
+				if (isCanvasTaintError(error)) {
+					console.error(
+						"Screenshot failed: canvas tainted. The video is cross-origin without CORS allowing canvas use. " +
+							"Serve the media with Access-Control-Allow-Origin and set crossOrigin=\"anonymous\" on the player " +
+							"(must be set before the media loads)."
+					)
+					return
 				}
-			}, "image/png")
-		} catch (error) {
-			if (error instanceof Error && error.message.includes("tainted")) {
-				console.error(
-					"Canvas is tainted - video source may not have proper CORS headers. Try setting crossOrigin='anonymous' on the video element."
-				)
-				alert(
-					"Screenshot failed: The video source doesn't allow screenshots due to CORS policy. Please ensure the video server includes proper CORS headers or set crossOrigin='anonymous' on the video player."
-				)
-			} else {
 				console.error("Screenshot failed:", error)
-				alert("Screenshot failed: " + (error instanceof Error ? error.message : "Unknown error"))
 			}
-		}
-	}
+		},
+		[videoRef]
+	)
 
 	return { takeScreenshot }
 }

package/src/types/assets.d.ts

@@ -0,0 +1,29 @@
+declare module "*.gif" {
+	const src: string
+	export default src
+}
+
+declare module "*.png" {
+	const src: string
+	export default src
+}
+
+declare module "*.jpg" {
+	const src: string
+	export default src
+}
+
+declare module "*.jpeg" {
+	const src: string
+	export default src
+}
+
+declare module "*.webp" {
+	const src: string
+	export default src
+}
+
+declare module "*.svg" {
+	const src: string
+	export default src
+}

package/dist/context/media.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"media.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/context/media.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"media.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/context/store.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"store.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/context/store.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"store.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}