@therealtinhtute/baroiplayer 1.0.2 → 1.0.4

package/dist/styles/globals.css

@@ -0,0 +1,462 @@
+/* BaroiPlayer Global Styles
+ * Modern media player with Tailwind CSS v4 integration
+ * Includes design tokens, accessibility features, and responsive design
+ */
+
+/* Import Tailwind CSS base styles */
+@import "tailwindcss";
+
+/* Import design tokens from UI package if available */
+@import "@rp/ui/styles/design-tokens.css";
+
+/* ===== ROOT STYLES & CSS VARIABLES ===== */
+:root {
+	/* Media Player Colors */
+	--media-primary: oklch(62% 0.25 240);
+	--media-secondary: oklch(75% 0.18 180);
+	--media-accent: oklch(85% 0.12 60);
+
+	/* Player Background */
+	--media-bg: oklch(8% 0.02 240);
+	--media-surface: oklch(12% 0.02 240);
+	--media-overlay: oklch(15% 0.02 240 / 0.9);
+
+	/* Text Colors */
+	--media-text-primary: oklch(95% 0.005 240);
+	--media-text-secondary: oklch(75% 0.008 240);
+	--media-text-muted: oklch(60% 0.01 240);
+
+	/* Control States */
+	--media-control-idle: oklch(68% 0.20 142);
+	--media-control-hover: oklch(85% 0.08 240);
+	--media-control-active: oklch(72% 0.15 30);
+	--media-control-disabled: oklch(45% 0.005 240);
+
+	/* Progress Bar */
+	--media-progress-bg: oklch(25% 0.02 240);
+	--media-progress-fill: oklch(75% 0.18 240);
+	--media-progress-buffered: oklch(60% 0.12 240);
+
+	/* Focus & Accessibility */
+	--media-focus-outline: 2px solid var(--media-secondary);
+	--media-focus-offset: 2px;
+
+	/* Animations */
+	--media-transition: 200ms;
+	--media-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--media-bg: oklch(6% 0.01 240);
+		--media-surface: oklch(10% 0.01 240);
+		--media-text-primary: oklch(98% 0.003 240);
+	}
+}
+
+/* ===== BASE STYLES ===== */
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	background-color: var(--media-bg);
+	color: var(--media-text-primary);
+	line-height: 1.5;
+}
+
+/* ===== MEDIA PLAYER COMPONENT STYLES ===== */
+
+/* Base Player Container */
+.media-player {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background-color: var(--media-bg);
+	border-radius: 0.5rem;
+	overflow: hidden;
+}
+
+/* Player Video Element */
+.media-player video,
+.media-player audio {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+/* Control Panel */
+.media-player-controls {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: linear-gradient(to top, var(--media-overlay), transparent);
+	padding: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	transition: opacity var(--media-transition) var(--media-ease);
+}
+
+/* Play/Pause Button */
+.media-player-play-button {
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 50%;
+	background-color: var(--media-control-idle);
+	border: none;
+	color: white;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--media-transition) var(--media-ease);
+}
+
+.media-player-play-button:hover {
+	background-color: var(--media-control-hover);
+	transform: scale(1.05);
+}
+
+.media-player-play-button:focus {
+	outline: var(--media-focus-outline);
+	outline-offset: var(--media-focus-offset);
+}
+
+/* Progress Bar */
+.media-player-progress {
+	flex: 1;
+	height: 0.5rem;
+	background-color: var(--media-progress-bg);
+	border-radius: 0.25rem;
+	position: relative;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+.media-player-progress-bar {
+	height: 100%;
+	background-color: var(--media-progress-fill);
+	border-radius: 0.25rem;
+	position: relative;
+	transition: width 0.1s linear;
+}
+
+.media-player-progress-buffered {
+	height: 100%;
+	background-color: var(--media-progress-buffered);
+	border-radius: 0.25rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+/* Volume Control */
+.media-player-volume {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.media-player-volume-slider {
+	width: 6rem;
+	height: 0.25rem;
+	background-color: var(--media-progress-bg);
+	border-radius: 0.125rem;
+	outline: none;
+	cursor: pointer;
+}
+
+.media-player-volume-slider::-webkit-slider-thumb {
+	appearance: none;
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+	background-color: var(--media-control-idle);
+	cursor: pointer;
+}
+
+/* Time Display */
+.media-player-time {
+	font-size: 0.875rem;
+	color: var(--media-text-secondary);
+	font-variant-numeric: tabular-nums;
+	min-width: 5rem;
+	text-align: center;
+}
+
+/* Fullscreen Button */
+.media-player-fullscreen-button {
+	width: 2rem;
+	height: 2rem;
+	border-radius: 0.25rem;
+	background-color: transparent;
+	border: 1px solid var(--media-control-idle);
+	color: var(--media-text-primary);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--media-transition) var(--media-ease);
+}
+
+.media-player-fullscreen-button:hover {
+	background-color: var(--media-control-hover);
+}
+
+/* Settings Menu */
+.media-player-settings {
+	position: absolute;
+	bottom: 4rem;
+	right: 1rem;
+	background-color: var(--media-surface);
+	border: 1px solid var(--media-progress-bg);
+	border-radius: 0.5rem;
+	padding: 0.5rem;
+	min-width: 12rem;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.media-player-settings-item {
+	padding: 0.5rem 0.75rem;
+	border-radius: 0.25rem;
+	cursor: pointer;
+	color: var(--media-text-primary);
+	transition: background-color var(--media-transition) var(--media-ease);
+}
+
+.media-player-settings-item:hover {
+	background-color: var(--media-control-hover);
+}
+
+/* Loading Spinner */
+.media-player-loading {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 3rem;
+	height: 3rem;
+	border: 3px solid var(--media-progress-bg);
+	border-top-color: var(--media-progress-fill);
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+
+/* Error Display */
+.media-player-error {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: var(--media-surface);
+	padding: 1.5rem;
+	border-radius: 0.5rem;
+	text-align: center;
+	max-width: 80%;
+}
+
+.media-player-error-title {
+	color: var(--media-text-primary);
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.media-player-error-message {
+	color: var(--media-text-secondary);
+	font-size: 0.875rem;
+}
+
+/* Subtitle Display */
+.media-player-subtitles {
+	position: absolute;
+	bottom: 4rem;
+	left: 0;
+	right: 0;
+	text-align: center;
+	padding: 0 1rem;
+	pointer-events: none;
+}
+
+.media-player-subtitle-text {
+	display: inline-block;
+	background-color: rgba(0, 0, 0, 0.8);
+	color: white;
+	padding: 0.25rem 0.5rem;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+	line-height: 1.4;
+}
+
+/* Picture-in-Picture Button */
+.media-player-pip-button {
+	width: 2rem;
+	height: 2rem;
+	border-radius: 0.25rem;
+	background-color: transparent;
+	border: 1px solid var(--media-control-idle);
+	color: var(--media-text-primary);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--media-transition) var(--media-ease);
+}
+
+.media-player-pip-button:hover {
+	background-color: var(--media-control-hover);
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+	.media-player-controls {
+		padding: 0.75rem;
+		gap: 0.5rem;
+	}
+
+	.media-player-play-button {
+		width: 2rem;
+		height: 2rem;
+	}
+
+	.media-player-volume-slider {
+		width: 4rem;
+	}
+
+	.media-player-time {
+		font-size: 0.75rem;
+		min-width: 4rem;
+	}
+
+	.media-player-fullscreen-button,
+	.media-player-pip-button {
+		width: 1.75rem;
+		height: 1.75rem;
+	}
+}
+
+/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
+
+/* Focus Management */
+.media-player *:focus {
+	outline: var(--media-focus-outline);
+	outline-offset: var(--media-focus-offset);
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+	:root {
+		--media-focus-outline: 3px solid currentColor;
+		--media-focus-offset: 3px;
+	}
+
+	.media-player-play-button,
+	.media-player-fullscreen-button,
+	.media-player-pip-button {
+		border-width: 2px;
+	}
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+	* {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+/* Screen Reader Only */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* ===== MINIMAL PLAYER VARIANT ===== */
+
+.minimal-player {
+	--minimal-bg: transparent;
+	--minimal-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.minimal-player .media-player-controls {
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+	border-top: var(--minimal-border);
+}
+
+.minimal-player .media-player-play-button {
+	background-color: rgba(255, 255, 255, 0.1);
+	backdrop-filter: blur(8px);
+}
+
+.minimal-player .media-player-settings {
+	background-color: rgba(20, 20, 20, 0.95);
+	backdrop-filter: blur(12px);
+}
+
+/* ===== KEYBOARD NAVIGATION ===== */
+
+/* Keyboard shortcut help */
+.media-player-keyboard-help {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	background-color: var(--media-surface);
+	border: 1px solid var(--media-progress-bg);
+	border-radius: 0.5rem;
+	padding: 1rem;
+	min-width: 16rem;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+	z-index: 1000;
+}
+
+.media-player-keyboard-help h3 {
+	margin: 0 0 0.5rem 0;
+	color: var(--media-text-primary);
+	font-size: 0.875rem;
+	font-weight: 600;
+}
+
+.media-player-keyboard-help-item {
+	display: flex;
+	justify-content: space-between;
+	padding: 0.25rem 0;
+	font-size: 0.75rem;
+}
+
+.media-player-keyboard-help-key {
+	color: var(--media-text-secondary);
+	font-family: monospace;
+}
+
+/* ===== PRINT STYLES ===== */
+@media print {
+	.media-player {
+		break-inside: avoid;
+		border: 1px solid currentColor;
+	}
+
+	.media-player-controls,
+	.media-player-loading,
+	.media-player-error {
+		display: none;
+	}
+}

package/dist/styles/pixel-art.css

@@ -0,0 +1,46 @@
+/* Pixel Art Styles for Media Player */
+.pixel-button {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
+  letter-spacing: 0.05em;
+}
+
+.pixel-button svg {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  filter: contrast(1.2) brightness(1.1);
+}
+
+.pixel-button:hover svg {
+  filter: contrast(1.3) brightness(1.2) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
+}
+
+.pixel-progress {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+.pixel-progress [role="slider"] {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  box-shadow: 
+    0 0 0 1px rgba(0, 0, 0, 0.8),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.pixel-time-display {
+  text-shadow: 
+    1px 1px 0 rgba(0, 0, 0, 0.8),
+    -1px -1px 0 rgba(0, 0, 0, 0.8),
+    1px -1px 0 rgba(0, 0, 0, 0.8),
+    -1px 1px 0 rgba(0, 0, 0, 0.8);
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}

package/dist/styles/videojs.css

@@ -0,0 +1,100 @@
+/* Import Video.js base styles */
+@import 'video.js/dist/video-js.css';
+
+/* Custom overrides for Video.js to work with Tailwind v4 */
+.video-js {
+  font-family: inherit;
+  font-size: 1em;
+  color: #fff;
+}
+
+.video-js .vjs-big-play-button {
+  font-size: 3em;
+  line-height: 1.5em;
+  height: 1.5em;
+  width: 3em;
+  border: 0.06666em solid #fff;
+  border-radius: 0.3em;
+  left: 50%;
+  top: 50%;
+  margin-left: -1.5em;
+  margin-top: -0.75em;
+}
+
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.video-js .vjs-control-bar {
+  display: flex;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+}
+
+.video-js .vjs-progress-control {
+  position: absolute;
+  bottom: 2.5em;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 0.3em;
+}
+
+.video-js .vjs-progress-holder {
+  margin: 0;
+  height: 0.3em;
+}
+
+.video-js .vjs-load-progress,
+.video-js .vjs-play-progress {
+  height: 0.3em;
+}
+
+.video-js .vjs-menu-button-popup .vjs-menu {
+  background-color: rgba(0, 0, 0, 0.9);
+  border-radius: 0.3em;
+}
+
+/* Quality selector styling */
+.vjs-quality-selector .vjs-menu-button {
+  order: 8;
+}
+
+.vjs-quality-selector .vjs-icon-placeholder:before {
+  content: "HD";
+  font-family: inherit;
+  font-weight: bold;
+  font-size: 0.8em;
+}
+
+/* Hide default controls when using custom controls */
+.video-js.vjs-controls-disabled .vjs-control-bar {
+  display: none;
+}
+
+/* Subtitle styling */
+.video-js .vjs-text-track-display {
+  pointer-events: none;
+}
+
+.video-js .vjs-text-track-cue {
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 0.2em;
+  padding: 0.2em 0.3em;
+}
+
+/* Loading spinner */
+.video-js .vjs-loading-spinner {
+  border-color: rgba(255, 255, 255, 0.2);
+  border-top-color: #fff;
+}
+
+/* Error display */
+.video-js .vjs-error-display {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.video-js .vjs-error-display .vjs-modal-dialog-content {
+  font-size: 1.2em;
+  text-align: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@therealtinhtute/baroiplayer",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"private": false,
 	"type": "module",
 	"description": "A customizable media player component library for React",
@@ -12,6 +12,8 @@
 		},
 		"./globals.css": "./dist/index.css",
 		"./minimal-player.css": "./dist/minimal-components.css",
+		"./dist/styles/minimal-player.css": "./dist/minimal-components.css",
+		"./styles/minimal-player.css": "./dist/minimal-components.css",
 		"./dist/*": "./dist/*",
 		"./lib/*": "./src/lib/*.ts",
 		"./components/*": "./src/components/*.tsx",
@@ -33,7 +35,7 @@
 		"build:skip-types": "vite build --mode production",
 		"build:analyze": "vite build --mode analyze",
 		"build:watch": "vite build --watch",
-		"dev": "vite build --watch",
+		"dev": "node build-simple.js",
 		"prepublishOnly": "bun run build && bun run lint",
 		"publish:beta": "npm publish --tag beta",
 		"publish:next": "npm publish --tag next",

package/src/hooks/use-enhanced-media-player.ts

@@ -429,16 +429,16 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 
 	// Computed state
 	const computedState = useMemo(() => ({
-		isPlaying: optimisticState?.isPlaying ?? isPlaying,
-		currentTime: optimisticState?.currentTime ?? currentTime,
-		duration: optimisticState?.duration ?? duration,
-		volume: optimisticState?.volume ?? optimisticVolume,
-		isMuted: optimisticState?.isMuted ?? isMuted,
-		isLoading: optimisticState?.isBuffering ?? isLoading,
-		isBuffering: optimisticState?.isBuffering ?? isBuffering,
-		error: optimisticState?.error ?? error,
-		buffered: optimisticState?.buffered ?? buffered,
-		isFullscreen: optimisticState?.isFullscreen ?? isFullscreen,
+		isPlaying: optimisticState?.state?.isPlaying ?? isPlaying,
+		currentTime: optimisticState?.state?.currentTime ?? currentTime,
+		duration: optimisticState?.state?.duration ?? duration,
+		volume: optimisticState?.state?.volume ?? optimisticVolume,
+		isMuted: optimisticState?.state?.isMuted ?? isMuted,
+		isLoading: optimisticState?.state?.isBuffering ?? isLoading,
+		isBuffering: optimisticState?.state?.isBuffering ?? isBuffering,
+		error: optimisticState?.state?.error ?? error,
+		buffered: optimisticState?.state?.buffered ?? buffered,
+		isFullscreen: optimisticState?.state?.isFullscreen ?? isFullscreen,
 		progress: duration > 0 ? currentTime / duration : 0,
 		isTransitioning: isPending || isSeeking,
 		canPlay: !isLoading && !isBuffering && !error
@@ -475,8 +475,8 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 		isTransitioning: isPending || isSeeking,
 
 		// Enhanced features
-		actions: optimisticState?.actions,
-		actionState: optimisticState?.actionState,
+		actions: optimisticState, // The optimisticState object contains all the actions
+		actionState: optimisticState?.state,
 
 		// Optimistic features
 		optimisticState,