@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/styles/pixel-art.css

@@ -1,46 +1,41 @@
 /* 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;
+	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);
+	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));
+	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;
+	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);
+	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;
+	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/src/styles/videojs.css

@@ -1,100 +1,100 @@
 /* Import Video.js base styles */
-@import 'video.js/dist/video-js.css';
+@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;
+	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;
+	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);
+	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);
+	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;
+	position: absolute;
+	bottom: 2.5em;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 0.3em;
 }
 
 .video-js .vjs-progress-holder {
-  margin: 0;
-  height: 0.3em;
+	margin: 0;
+	height: 0.3em;
 }
 
 .video-js .vjs-load-progress,
 .video-js .vjs-play-progress {
-  height: 0.3em;
+	height: 0.3em;
 }
 
 .video-js .vjs-menu-button-popup .vjs-menu {
-  background-color: rgba(0, 0, 0, 0.9);
-  border-radius: 0.3em;
+	background-color: rgba(0, 0, 0, 0.9);
+	border-radius: 0.3em;
 }
 
 /* Quality selector styling */
 .vjs-quality-selector .vjs-menu-button {
-  order: 8;
+	order: 8;
 }
 
 .vjs-quality-selector .vjs-icon-placeholder:before {
-  content: "HD";
-  font-family: inherit;
-  font-weight: bold;
-  font-size: 0.8em;
+	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;
+	display: none;
 }
 
 /* Subtitle styling */
 .video-js .vjs-text-track-display {
-  pointer-events: none;
+	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;
+	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;
+	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);
+	background: rgba(0, 0, 0, 0.9);
 }
 
 .video-js .vjs-error-display .vjs-modal-dialog-content {
-  font-size: 1.2em;
-  text-align: center;
+	font-size: 1.2em;
+	text-align: center;
 }

package/src/test/accessibility-utils.ts

@@ -0,0 +1,208 @@
+import { vi } from "vitest"
+
+// Custom accessibility testing utilities
+export const a11yTestUtils = {
+	// Test keyboard navigation
+	testKeyboardNavigation: async (container: HTMLElement) => {
+		const focusableElements = container.querySelectorAll(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		)
+
+		const results = []
+
+		for (let i = 0; i < focusableElements.length; i++) {
+			const element = focusableElements[i] as HTMLElement
+
+			// Test if element can be focused
+			element.focus()
+			if (document.activeElement !== element) {
+				results.push({
+					element,
+					issue: "Element cannot be focused with keyboard"
+				})
+			}
+
+			// Test tab order
+			if (i > 0) {
+				const prevElement = focusableElements[i - 1] as HTMLElement
+				prevElement.focus()
+				document.activeElement?.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }))
+
+				if (document.activeElement !== element) {
+					results.push({
+						element,
+						issue: "Incorrect tab order"
+					})
+				}
+			}
+		}
+
+		return results
+	},
+
+	// Test ARIA attributes
+	testAriaAttributes: (container: HTMLElement) => {
+		const violations: Array<{ element: Element; issue: string }> = []
+
+		// Check for required ARIA attributes
+		const elementsNeedingAria = container.querySelectorAll(
+			"[role], [aria-label], [aria-labelledby]"
+		)
+
+		elementsNeedingAria.forEach((element) => {
+			const role = element.getAttribute("role")
+
+			if (
+				role === "button" &&
+				!element.getAttribute("aria-label") &&
+				!element.getAttribute("aria-labelledby") &&
+				!element.textContent?.trim()
+			) {
+				violations.push({
+					element,
+					issue: "Button role without accessible name"
+				})
+			}
+
+			if (role === "application" && !element.getAttribute("aria-label")) {
+				violations.push({
+					element,
+					issue: "Application role without aria-label"
+				})
+			}
+		})
+
+		return violations
+	},
+
+	// Test color contrast (mock implementation)
+	testColorContrast: (container: HTMLElement) => {
+		const violations: Array<{ element: Element; issue: string }> = []
+		const textElements = container.querySelectorAll("p, span, div, button, a")
+
+		textElements.forEach((element) => {
+			const styles = window.getComputedStyle(element)
+			const color = styles.color
+			const backgroundColor = styles.backgroundColor
+
+			// Mock contrast calculation
+			if (color === "rgb(128, 128, 128)" && backgroundColor === "rgb(240, 240, 240)") {
+				violations.push({
+					element,
+					issue: "Insufficient color contrast"
+				})
+			}
+		})
+
+		return violations
+	},
+
+	// Test screen reader announcements
+	testScreenReaderAnnouncements: (container: HTMLElement) => {
+		const liveRegions = container.querySelectorAll('[aria-live], [role="status"], [role="alert"]')
+		const announcements: Array<{ region: Element; text: string; priority: string }> = []
+
+		liveRegions.forEach((region) => {
+			const text = region.textContent?.trim()
+			if (text) {
+				announcements.push({
+					region,
+					text,
+					priority: region.getAttribute("aria-live") || "polite"
+				})
+			}
+		})
+
+		return announcements
+	},
+
+	// Test focus management
+	testFocusManagement: (container: HTMLElement) => {
+		const issues: Array<{ element: Element; issue: string }> = []
+
+		// Test for focus traps
+		const focusTraps = container.querySelectorAll('[data-focus-trap="true"]')
+		focusTraps.forEach((trap) => {
+			const focusableElements = trap.querySelectorAll(
+				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			)
+
+			if (focusableElements.length === 0) {
+				issues.push({
+					element: trap,
+					issue: "Focus trap contains no focusable elements"
+				})
+			}
+		})
+
+		// Test for proper focus restoration
+		const modalTriggers = container.querySelectorAll("[data-modal-trigger]")
+		modalTriggers.forEach((trigger) => {
+			if (!trigger.getAttribute("aria-controls")) {
+				issues.push({
+					element: trigger,
+					issue: "Modal trigger missing aria-controls"
+				})
+			}
+		})
+
+		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/src/test/browser-simulation.ts

@@ -0,0 +1,235 @@
+export interface BrowserProfile {
+	name: string
+	userAgent: string
+	features: {
+		supportsPictureInPicture: boolean
+		supportsFullscreen: boolean
+		supportsHLS: boolean
+		supportsWebM: boolean
+		supportsTouch: boolean
+		mediaCapabilities: {
+			canPlayType: (mimeType: string) => "probably" | "maybe" | ""
+		}
+	}
+}
+
+export const browserProfiles: Record<string, BrowserProfile> = {
+	chrome: {
+		name: "Chrome",
+		userAgent:
+			"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+		features: {
+			supportsPictureInPicture: true,
+			supportsFullscreen: true,
+			supportsHLS: true,
+			supportsWebM: true,
+			supportsTouch: false,
+			mediaCapabilities: {
+				canPlayType: (mimeType: string) => {
+					if (mimeType.includes("webm")) return "probably"
+					if (mimeType.includes("mp4")) return "probably"
+					return "maybe"
+				}
+			}
+		}
+	},
+
+	firefox: {
+		name: "Firefox",
+		userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0",
+		features: {
+			supportsPictureInPicture: false,
+			supportsFullscreen: true,
+			supportsHLS: false,
+			supportsWebM: true,
+			supportsTouch: false,
+			mediaCapabilities: {
+				canPlayType: (mimeType: string) => {
+					if (mimeType.includes("webm")) return "probably"
+					if (mimeType.includes("mp4")) return "maybe"
+					if (mimeType.includes("hls")) return ""
+					return "maybe"
+				}
+			}
+		}
+	},
+
+	safari: {
+		name: "Safari",
+		userAgent:
+			"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15",
+		features: {
+			supportsPictureInPicture: true,
+			supportsFullscreen: true,
+			supportsHLS: true,
+			supportsWebM: false,
+			supportsTouch: false,
+			mediaCapabilities: {
+				canPlayType: (mimeType: string) => {
+					if (mimeType.includes("mp4")) return "probably"
+					if (mimeType.includes("hls")) return "probably"
+					if (mimeType.includes("webm")) return ""
+					return "maybe"
+				}
+			}
+		}
+	},
+
+	mobile: {
+		name: "Mobile Safari",
+		userAgent:
+			"Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1",
+		features: {
+			supportsPictureInPicture: true,
+			supportsFullscreen: false,
+			supportsHLS: true,
+			supportsWebM: false,
+			supportsTouch: true,
+			mediaCapabilities: {
+				canPlayType: (mimeType: string) => {
+					if (mimeType.includes("mp4")) return "probably"
+					if (mimeType.includes("hls")) return "probably"
+					return "maybe"
+				}
+			}
+		}
+	}
+}
+
+export function simulateBrowser(profile: BrowserProfile) {
+	// Mock navigator.userAgent
+	Object.defineProperty(navigator, "userAgent", {
+		writable: true,
+		value: profile.userAgent
+	})
+
+	// Mock feature detection
+	Object.defineProperty(document, "pictureInPictureEnabled", {
+		writable: true,
+		value: profile.features.supportsPictureInPicture
+	})
+
+	Object.defineProperty(document, "fullscreenEnabled", {
+		writable: true,
+		value: profile.features.supportsFullscreen
+	})
+
+	// Mock touch support
+	Object.defineProperty(navigator, "maxTouchPoints", {
+		writable: true,
+		value: profile.features.supportsTouch ? 1 : 0
+	})
+
+	// Mock touch events
+	if (profile.features.supportsTouch) {
+		Object.defineProperty(window, "TouchEvent", {
+			writable: true,
+			value: class MockTouchEvent extends Event {
+				constructor(type: string, eventInitDict?: TouchEventInit) {
+					super(type, eventInitDict)
+				}
+			}
+		})
+
+		Object.defineProperty(window, "Touch", {
+			writable: true,
+			value: class MockTouch {
+				constructor(
+					public identifier: number,
+					public target: EventTarget,
+					public clientX: number,
+					public clientY: number
+				) {}
+			}
+		})
+	}
+
+	// Mock media capabilities
+	const mockVideoElement = {
+		canPlayType: profile.features.mediaCapabilities.canPlayType
+	}
+
+	Object.defineProperty(window, "HTMLVideoElement", {
+		writable: true,
+		value: class MockVideoElement {
+			canPlayType = mockVideoElement.canPlayType
+		}
+	})
+
+	// Mock device pixel ratio for retina displays
+	if (profile.name.includes("Safari")) {
+		Object.defineProperty(window, "devicePixelRatio", {
+			writable: true,
+			value: 2
+		})
+	}
+
+	// Mock platform detection
+	Object.defineProperty(navigator, "platform", {
+		writable: true,
+		value: profile.userAgent.includes("iPhone") ? "iPhone" : "Win32"
+	})
+}
+
+// Cross-browser testing utilities
+export const browserTestUtils = {
+	// Test feature detection
+	testFeatureSupport: (profile: BrowserProfile, feature: string) => {
+		simulateBrowser(profile)
+
+		switch (feature) {
+			case "pictureInPicture":
+				return document.pictureInPictureEnabled
+			case "fullscreen":
+				return document.fullscreenEnabled
+			case "touch":
+				return navigator.maxTouchPoints > 0
+			case "hls":
+				return profile.features.supportsHLS
+			case "webm":
+				return profile.features.supportsWebM
+			default:
+				return false
+		}
+	},
+
+	// Test media format support
+	testMediaFormatSupport: (profile: BrowserProfile, mimeType: string) => {
+		simulateBrowser(profile)
+		const video = document.createElement("video")
+		return video.canPlayType(mimeType) !== ""
+	},
+
+	// Test viewport sizes
+	testViewportSize: (profile: BrowserProfile) => {
+		if (profile.name.includes("Mobile")) {
+			return { width: 375, height: 667 }
+		} else if (profile.name.includes("Tablet")) {
+			return { width: 768, height: 1024 }
+		} else {
+			return { width: 1920, height: 1080 }
+		}
+	},
+
+	// Test browser-specific CSS support
+	testCSSSupport: (profile: BrowserProfile, property: string) => {
+		simulateBrowser(profile)
+
+		// Mock CSS.supports
+		Object.defineProperty(CSS, "supports", {
+			writable: true,
+			value: (property: string, value?: string) => {
+				if (profile.name === "Chrome") {
+					return true // Chrome supports most modern CSS
+				} else if (profile.name === "Firefox") {
+					return !property.includes("-webkit-")
+				} else if (profile.name === "Safari") {
+					return !property.includes("-moz-")
+				}
+				return true
+			}
+		})
+
+		return CSS.supports(property)
+	}
+}