@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/variants/gradient/gradient-glyphs.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import {
+	MinimalExitFullscreenIcon,
+	MinimalFullscreenIcon,
+	MinimalPauseIcon,
+	MinimalPlayIcon,
+	MinimalSettingsIcon,
+	MinimalSpeedIcon,
+	MinimalSpinner,
+	MinimalSubtitleIcon,
+	MinimalVolumeMutedIcon
+} from "../../icons"
+import ArrowLeftIcon from "../../icons/svg-icons/ArrowLeftIcon"
+import ArrowRightIcon from "../../icons/svg-icons/ArrowRightIcon"
+import AudioIcon from "../../icons/svg-icons/AudioIcon"
+import BackwardIcon from "../../icons/svg-icons/BackwardIcon"
+import CheckIcon from "../../icons/svg-icons/CheckIcon"
+import EnablePiPIcon from "../../icons/svg-icons/EnablePiPIcon"
+import ForwardIcon from "../../icons/svg-icons/ForwardIcon"
+import QualityIcon from "../../icons/svg-icons/QualityIcon"
+import SliderIcon from "../../icons/svg-icons/SliderIcon"
+import SubtitleOffIcon from "../../icons/svg-icons/SubtitleOffIcon"
+import UnPiPIcon from "../../icons/svg-icons/UnPiPIcon"
+import VolumeOneIcon from "../../icons/svg-icons/VolumeOneIcon"
+import VolumeThreeIcon from "../../icons/svg-icons/VolumeThreeIcon"
+import VolumeTwoIcon from "../../icons/svg-icons/VolumeTwoIcon"
+
+export interface GradientGlyphProps {
+	size?: number
+	className?: string
+	color?: string
+}
+
+const glyphProps = (size = 24, className = "", color = "currentColor") => ({
+	width: size,
+	height: size,
+	className,
+	style: { color }
+})
+
+export const GradientPlayIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalPlayIcon size={size} className={className} color={color} />
+)
+
+export const GradientPauseIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalPauseIcon size={size} className={className} color={color} />
+)
+
+export const GradientVolumeMutedIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalVolumeMutedIcon size={size} className={className} color={color} />
+)
+
+/** Level-switched volume glyph: `off`/`low`/`medium`/`high` → the four v1 volume SVGs. */
+export const GradientVolumeLevelIcon = ({ level, size, className, color }: GradientGlyphProps & { level: "off" | "low" | "medium" | "high" }) => {
+	const props = glyphProps(size, className, color)
+	if (level === "off") return <VolumeOneIcon {...props} />
+	if (level === "low") return <VolumeOneIcon {...props} />
+	if (level === "medium") return <VolumeTwoIcon {...props} />
+	return <VolumeThreeIcon {...props} />
+}
+
+export const GradientFullscreenIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalFullscreenIcon size={size} className={className} color={color} />
+)
+
+export const GradientExitFullscreenIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalExitFullscreenIcon size={size} className={className} color={color} />
+)
+
+export const GradientCaptionsOnIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalSubtitleIcon size={size} className={className} color={color} />
+)
+
+export const GradientCaptionsOffIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<SubtitleOffIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientSpeedIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalSpeedIcon size={size} className={className} color={color} />
+)
+
+export const GradientBackward10Icon = ({ size, className, color }: GradientGlyphProps) => (
+	<BackwardIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientForward10Icon = ({ size, className, color }: GradientGlyphProps) => (
+	<ForwardIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientSpinnerIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalSpinner size={size} className={className} color={color} />
+)
+
+export const GradientPiPEnterIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<EnablePiPIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientPiPExitIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<UnPiPIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientSettingsIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<MinimalSettingsIcon size={size} className={className} color={color} />
+)
+
+export const GradientQualityIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<QualityIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientCheckIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<CheckIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientArrowLeftIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<ArrowLeftIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientArrowRightIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<ArrowRightIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientSliderThumbIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<SliderIcon {...glyphProps(size, className, color)} />
+)
+
+export const GradientAudioIcon = ({ size, className, color }: GradientGlyphProps) => (
+	<AudioIcon {...glyphProps(size, className, color)} />
+)

package/src/components/variants/gradient/gradient-skin.css

@@ -0,0 +1,211 @@
+/* Gradient skin — BaroiPlayer's design layer on Video.js v10 skins. */
+
+.gradient-skin {
+	--media-accent-color: #06b6d4;
+	--media-accent-text-color: #062a33;
+	--media-border-radius: 0.75rem;
+	--gradient-accent-from: #22d3ee;
+	--gradient-accent-to: #0891b2;
+	color: #ffffff;
+}
+
+/* Video frame */
+.gradient-video {
+	position: relative;
+	background: #000000;
+}
+
+.gradient-video-element {
+	width: 100%;
+	height: 100%;
+}
+
+/* Audio frame */
+.gradient-audio {
+	position: relative;
+	background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
+	border-radius: var(--media-border-radius);
+	padding: 1.5rem 1.5rem 0.75rem;
+	min-width: 320px;
+}
+
+.gradient-audio-title {
+	margin: 0 0 1rem;
+	font-size: 1rem;
+	font-weight: 600;
+	color: #e2e8f0;
+}
+
+/* Control bar: glassy gradient, v1 minimal-player lineage */
+.gradient-controls {
+	position: absolute;
+	inset-inline: 0;
+	bottom: 0;
+}
+
+.gradient-controls-backdrop {
+	background: linear-gradient(to top, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.6) 60%, transparent 100%);
+}
+
+.gradient-controls-content {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	padding: 0.5rem 0.75rem;
+}
+
+.gradient-controls-primary,
+.gradient-controls-secondary {
+	display: flex;
+	align-items: center;
+	gap: 0.125rem;
+	flex-shrink: 0;
+}
+
+.gradient-controls-time {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex: 1 1 auto;
+	min-width: 0;
+	padding: 0 0.5rem;
+}
+
+.gradient-control-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 9999px;
+	color: #ffffff;
+	background: none;
+	border: none;
+	transition: color 200ms ease, transform 200ms ease;
+}
+
+.gradient-control-btn:hover {
+	color: var(--gradient-accent-from);
+	transform: scale(1.08);
+}
+
+.gradient-control-btn:active {
+	transform: scale(0.95);
+}
+
+.gradient-control-btn:focus-visible {
+	outline: 2px solid var(--gradient-accent-from);
+	outline-offset: 2px;
+}
+
+/* Sliders */
+.gradient-seekbar,
+.gradient-volume-slider {
+	--media-slider-preview-offset: -2.5rem;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.gradient-volume-slider {
+	flex: 0 0 5rem;
+}
+
+.gradient-slider-track {
+	height: 4px;
+	border-radius: 9999px;
+	background: rgba(255, 255, 255, 0.25);
+}
+
+.gradient-slider-fill {
+	background: linear-gradient(90deg, var(--gradient-accent-from), var(--gradient-accent-to));
+	border-radius: 9999px;
+}
+
+.gradient-slider-thumb {
+	width: 20px;
+	height: 20px;
+	margin-top: -8px;
+	border-radius: 9999px;
+	background: #ffffff;
+	color: var(--gradient-accent-to);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.gradient-slider-thumb:hover {
+	transform: scale(1.15);
+}
+
+/* Time */
+.gradient-time,
+.gradient-time-sep {
+	font-variant-numeric: tabular-nums;
+	font-size: 0.8rem;
+	color: rgba(255, 255, 255, 0.85);
+	white-space: nowrap;
+}
+
+.gradient-time-sep {
+	margin: 0 0.2rem;
+	color: rgba(255, 255, 255, 0.4);
+}
+
+/* Buffering spinner */
+.gradient-buffering {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+}
+
+.gradient-spinner {
+	color: var(--gradient-accent-from);
+}
+
+/* Menus */
+.gradient-menu-popup {
+	z-index: 60;
+}
+
+.gradient-menu {
+	background: rgba(15, 23, 42, 0.96);
+	border: 1px solid rgba(148, 163, 184, 0.25);
+	border-radius: 0.5rem;
+	padding: 0.375rem;
+	color: #e2e8f0;
+	min-width: 11rem;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+.gradient-menu-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.375rem 0.5rem;
+	border-radius: 0.375rem;
+	font-size: 0.85rem;
+	cursor: pointer;
+}
+
+.gradient-menu-item[data-highlighted] {
+	background: rgba(6, 182, 212, 0.18);
+	color: #ffffff;
+}
+
+.gradient-menu-label {
+	flex: 1 1 auto;
+}
+
+/* Tooltip */
+.gradient-tooltip {
+	background: rgba(15, 23, 42, 0.95);
+	border: 1px solid rgba(148, 163, 184, 0.25);
+	border-radius: 0.375rem;
+	padding: 0.25rem 0.5rem;
+	font-size: 0.75rem;
+	color: #e2e8f0;
+}

package/src/components/variants/gradient/gradient-video.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import "@videojs/react/video/skin.css"
+import "./gradient-skin.css"
+import { Video, VideoPlayer } from "@videojs/react/video"
+import { BufferingIndicator, Container, Dialog, ErrorDialog, Gesture, Hotkey, Poster } from "@videojs/react"
+import { GradientSpinnerIcon } from "./gradient-glyphs"
+import { GradientControls } from "./gradient-controls"
+
+export interface GradientVideoProps {
+	src: string
+	poster?: string
+	className?: string
+	autoPlay?: boolean
+	playsInline?: boolean
+	loop?: boolean
+	title?: string
+}
+
+/**
+ * Gradient skin on Video.js v10 — `VideoPlayer` + `Video` from the preset, with a
+ * BaroiPlayer-owned skin layer (ejected per the upstream customize-skins model) that binds
+ * the untouched v1 glyphs through v10 `render` props.
+ */
+export function GradientVideo({ src, poster, className, autoPlay, playsInline, loop, title }: GradientVideoProps) {
+	return (
+		<VideoPlayer title={title}>
+			<Container className={`gradient-skin gradient-video ${className ?? ""}`} data-theme="gradient" data-preset="video">
+				<Video src={src} autoPlay={autoPlay} loop={loop} playsInline={playsInline ?? true} className="gradient-video-element" />
+				{poster ? (
+					<Poster.Root>
+						<Poster.Image className="gradient-poster" />
+					</Poster.Root>
+				) : null}
+				<BufferingIndicator
+					className="gradient-buffering"
+					render={(props, state) => (
+						<div {...props}>{state.visible && <GradientSpinnerIcon size={48} className="gradient-spinner" />}</div>
+					)}
+				/>
+				<ErrorDialog.Root>
+					<Dialog.Backdrop className="media-dialog-backdrop" />
+					<Dialog.Popup className="media-dialog-popup">
+						<div className="media-dialog-content">
+							<ErrorDialog.Title className="media-dialog-title" />
+							<ErrorDialog.Description className="media-dialog-description" />
+						</div>
+						<div className="media-dialog-actions">
+							<ErrorDialog.Close className="media-dialog-close">Dismiss</ErrorDialog.Close>
+						</div>
+					</Dialog.Popup>
+				</ErrorDialog.Root>
+				<GradientControls />
+				<Hotkey keys="f" action="toggleFullscreen" />
+				<Hotkey keys="c" action="toggleSubtitles" />
+				<Hotkey keys="i" action="togglePictureInPicture" />
+				<Hotkey keys="Space" action="togglePaused" />
+				<Hotkey keys="k" action="togglePaused" />
+				<Hotkey keys="m" action="toggleMuted" />
+				<Hotkey keys="ArrowRight" action="seekStep" />
+				<Hotkey keys="ArrowLeft" action="seekStep" />
+				<Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
+				<Gesture type="tap" action="toggleControls" pointer="touch" />
+				<Gesture type="doubletap" action="seekStep" region="left" />
+				<Gesture type="doubletap" action="toggleFullscreen" region="center" />
+				<Gesture type="doubletap" action="seekStep" region="right" />
+			</Container>
+		</VideoPlayer>
+	)
+}

package/src/index.ts

@@ -1,201 +1,8 @@
 // ========================================
-// 🎯 BaroiPlayer - Primary Components
+// 🎯 BaroiPlayer v2 - Gradient Skins (Video.js v10)
 // ========================================
-// Main media player components - use these for most cases
 
-// Primary All-in-One Players (Recommended)
-export { MediaPlayer } from "./components/media-player"
-export { VideoPlayer } from "./components/video-player"
-export { AudioPlayer } from "./components/audio-player"
-
-// Modern Compound Components (Advanced)
-export { MediaPlayerRoot } from "./components/media-player-root"
-export type { MediaPlayerRootProps } from "./components/media-player-root"
-
-// Enhanced Player (React 19 Optimized)
-export { EnhancedMediaPlayer } from "./components/enhanced/media-player-enhanced"
-
-// ========================================
-// 🎨 Component Variants
-// ========================================
-// Specialized player variants for different use cases
-
-// Minimal Player (Clean & Simple)
-export {
-	MinimalMediaPlayer,
-	SimpleMinimalPlayer
-} from "./components/variants/minimal"
-export type { MinimalMediaPlayerProps } from "./components/variants/minimal"
-
-// ========================================
-// 🛠️ Advanced Features
-// ========================================
-// Advanced components for specific requirements
-
-// HLS Streaming
-export { MediaPlayerHLS } from "./components/media-player-hls"
-
-// Enhanced Controls & Features
-export {
-	ChaptersPanel,
-	PictureInPictureButton,
-	PlaybackSpeedSelector,
-	QualitySelector,
-	SubtitleSelector
-} from "./components/enhanced/advanced-features"
-
-// Enhanced Controls
-export {
-	EnhancedPlayButton,
-	EnhancedSeekBar,
-	EnhancedTimeDisplay,
-	EnhancedVolumeControl,
-	EnhancedControlBar
-} from "./components/enhanced/enhanced-controls"
-
-// React 19 Concurrent Features
-export {
-	ConcurrentMedia,
-	MediaSuspense,
-	MediaLoading,
-	MediaErrorBoundary,
-	useDeferredMediaLoading
-} from "./components/media-suspense"
-
-// ========================================
-// 🎣 Core Hooks
-// ========================================
-// React hooks for media player functionality
-
-// Core Hooks (Most Used)
-export { useMediaPlayer } from "./hooks/use-media-player"
-export { useMediaState } from "./hooks/use-media-state"
-export { useMediaControls } from "./hooks/useMediaControls"
-
-// React 19 Enhanced Hooks
-export { useEnhancedMediaPlayer } from "./hooks/use-enhanced-media-player"
-export { useMediaActions } from "./hooks/use-media-actions"
-export { useMediaActionState } from "./hooks/use-media-actions"
-
-// Performance & Optimization Hooks
-export { useIntelligentPreloading } from "./hooks/use-intelligent-preloading"
-
-// Specialized Hooks
-export { useKeyboardControls } from "./hooks/use-keyboard-controls"
-
-export { useTouchGestures } from "./hooks/use-touch-gestures"
-
-export { useScreenshot } from "./hooks/useScreenshot"
-export { useSubtitles } from "./hooks/useSubtitles"
-
-// ========================================
-// 🔧 Utilities & Types
-// ========================================
-// Utilities, types, and helper functions
-
-// Core Utilities
-export { formatTime, parseTime } from "./lib/format-time"
-export { cn } from "./lib/utils"
-
-// Media Type Detection
-export {
-	getMediaTypeFromUrl,
-	getMimeTypeFromUrl,
-	SUPPORTED_AUDIO_FORMATS,
-	SUPPORTED_VIDEO_FORMATS,
-	AUDIO_MIME_TYPES,
-	VIDEO_MIME_TYPES
-} from "./types"
-
-// Performance Monitoring
-export { PerformanceMonitor } from "./core/performance"
-
-// ========================================
-// 📚 Context & State
-// ========================================
-// React context and state management
-
-// Media Context
-export { MediaProvider } from "./context/media-provider"
-
-export {
-	useMediaContext,
-	useMediaDispatch,
-	useMediaSelector,
-	useOptimisticMediaSelector
-} from "./context/media-context"
-
-// Enhanced State Management (React 19)
-export { createEnhancedMediaStore } from "./context/media-store"
-
-// ========================================
-// 🎨 Icons & Styling
-// ========================================
-// Icon components and styling utilities
-
-// Icon Sets
-export {
-	defaultMinimalIcons,
-	MinimalPlayIcon,
-	MinimalPauseIcon,
-	MinimalVolumeIcon,
-	MinimalFullscreenIcon
-} from "./components/icons"
-export type { IconProps, IconSet } from "./components/icons"
-
-// ========================================
-// ⚠️ Legacy Exports (Deprecated)
-// ========================================
-// These will be removed in v2.0 - migrate to the APIs above
-// Each usage will show a deprecation warning in the console
-
-// Legacy Components (with deprecation warnings)
-export {
-	ModernMediaPlayer,
-	SimpleVideoPlayer,
-	LegacyPlayButton as PlayButton,
-	LegacySeekBar as SeekBar,
-	LegacyTimeDisplay as TimeDisplay,
-	LegacyVolumeControl as VolumeControl,
-	LegacyFullscreenButton as FullscreenButton
-} from "./components/legacy"
-
-// Legacy Hooks (with deprecation warnings)
-export {
-	useVideoPlayer,
-	useEnhancedSubtitles
-} from "./hooks/legacy"
-
-// ========================================
-// 🔒 Development Tools
-// ========================================
-// Development and debugging tools (dev only)
-
-export { DebugPanel } from "./components/enhanced/debug-panel"
-export { MediaResourcePreloader } from "./components/ui/media-resource-preloader"
-
-// ========================================
-// 📖 Type Exports
-// ========================================
-// Complete type definitions
-
-export type {
-	// Core Media Types
-	MediaSource,
-	MediaFormat,
-	MediaPlayerConfig,
-	MediaPlayerState,
-	MediaCapabilities,
-	// Event Types
-	MediaEventMap,
-	MediaEventType,
-	MediaErrorEvent,
-	MediaProgressEvent,
-	MediaTimeUpdateEvent,
-	MediaVolumeChangeEvent,
-	// Component Props
-	VideoFormat,
-	AudioFormat,
-	VideoMimeType,
-	AudioMimeType
-} from "./types"
+export { GradientVideo } from "./components/variants/gradient/gradient-video"
+export type { GradientVideoProps } from "./components/variants/gradient/gradient-video"
+export { GradientAudio } from "./components/variants/gradient/gradient-audio"
+export type { GradientAudioProps } from "./components/variants/gradient/gradient-audio"

package/src/test/accessibility-utils.ts

@@ -1,5 +1,3 @@
-import { vi } from "vitest"
-
 // Custom accessibility testing utilities
 export const a11yTestUtils = {
 	// Test keyboard navigation
@@ -149,60 +147,3 @@ export const a11yTestUtils = {
 		return issues
 	}
 }
-
-// Mock axe-core for accessibility testing
-export const mockAxe = {
-	run: vi.fn().mockResolvedValue({
-		violations: [],
-		passes: [],
-		incomplete: [],
-		url: "mock-url"
-	})
-}
-
-// Custom test matchers for accessibility
-export const accessibilityMatchers = {
-	toBeAccessible: async (container: HTMLElement) => {
-		const axeResults = await mockAxe.run(container)
-		const keyboardResults = await a11yTestUtils.testKeyboardNavigation(container)
-		const ariaResults = a11yTestUtils.testAriaAttributes(container)
-
-		const allViolations = [...axeResults.violations, ...keyboardResults, ...ariaResults]
-
-		if (allViolations.length === 0) {
-			return {
-				pass: true,
-				message: () => "Element is accessible"
-			}
-		}
-
-		return {
-			pass: false,
-			message: () => `Accessibility violations found: ${JSON.stringify(allViolations, null, 2)}`
-		}
-	},
-
-	toHaveCorrectAria: (element: HTMLElement) => {
-		const violations = a11yTestUtils.testAriaAttributes(element.parentElement!)
-
-		return {
-			pass: violations.length === 0,
-			message: () =>
-				violations.length > 0
-					? `ARIA violations: ${JSON.stringify(violations)}`
-					: "Element has correct ARIA attributes"
-		}
-	},
-
-	toSupportKeyboardNavigation: async (container: HTMLElement) => {
-		const issues = await a11yTestUtils.testKeyboardNavigation(container)
-
-		return {
-			pass: issues.length === 0,
-			message: () =>
-				issues.length > 0
-					? `Keyboard navigation issues: ${JSON.stringify(issues)}`
-					: "Element supports keyboard navigation"
-		}
-	}
-}

package/dist/context/media.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");const e=require("../context-eNS62_ac.cjs");exports.MediaActionTypes=e.MediaActionTypes;exports.MediaContext=e.MediaContext;exports.MediaStoreContext=e.MediaStoreContext;exports.initialMediaState=e.initialMediaState;exports.useMediaContext=e.useMediaContext;exports.useMediaDispatch=e.useMediaDispatch;exports.useMediaEnhancements=e.useMediaEnhancements;exports.useMediaSelector=e.useMediaSelector;exports.useMediaStore=e.useMediaStore;exports.useOptimisticMediaSelector=e.useOptimisticMediaSelector;
-//# sourceMappingURL=media.js.map

package/dist/context/media.js.map

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