@therealtinhtute/baroiplayer 1.0.0

package/src/test/setup.ts

@@ -0,0 +1,79 @@
+import "@testing-library/jest-dom"
+import { vi } from "vitest"
+
+// Mock HTMLMediaElement methods that are not implemented in jsdom
+Object.defineProperty(HTMLMediaElement.prototype, "play", {
+	writable: true,
+	value: vi.fn().mockImplementation(() => Promise.resolve())
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "pause", {
+	writable: true,
+	value: vi.fn()
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "load", {
+	writable: true,
+	value: vi.fn()
+})
+
+// Mock media properties
+Object.defineProperty(HTMLMediaElement.prototype, "currentTime", {
+	writable: true,
+	value: 0
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "duration", {
+	writable: true,
+	value: 100
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "volume", {
+	writable: true,
+	value: 1
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "muted", {
+	writable: true,
+	value: false
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "paused", {
+	writable: true,
+	value: true
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "ended", {
+	writable: true,
+	value: false
+})
+
+Object.defineProperty(HTMLMediaElement.prototype, "buffered", {
+	writable: true,
+	value: {
+		length: 0,
+		start: () => 0,
+		end: () => 0
+	}
+})
+
+// Mock fullscreen API
+Object.defineProperty(document, "fullscreenEnabled", {
+	writable: true,
+	value: true
+})
+
+Object.defineProperty(document, "fullscreenElement", {
+	writable: true,
+	value: null
+})
+
+Object.defineProperty(Element.prototype, "requestFullscreen", {
+	writable: true,
+	value: vi.fn().mockImplementation(() => Promise.resolve())
+})
+
+Object.defineProperty(document, "exitFullscreen", {
+	writable: true,
+	value: vi.fn().mockImplementation(() => Promise.resolve())
+})

package/src/types/events.ts

@@ -0,0 +1,47 @@
+// Media event types for better type safety
+
+export interface MediaEventMap {
+  play: Event;
+  pause: Event;
+  timeupdate: Event;
+  durationchange: Event;
+  volumechange: Event;
+  loadstart: Event;
+  loadeddata: Event;
+  loadedmetadata: Event;
+  canplay: Event;
+  canplaythrough: Event;
+  seeking: Event;
+  seeked: Event;
+  ended: Event;
+  error: Event;
+  progress: Event;
+  stalled: Event;
+  suspend: Event;
+  waiting: Event;
+  ratechange: Event;
+  resize: Event;
+  fullscreenchange: Event;
+}
+
+export type MediaEventType = keyof MediaEventMap;
+
+export interface MediaErrorEvent extends Event {
+  error: MediaError | null;
+}
+
+export interface MediaTimeUpdateEvent extends Event {
+  currentTime: number;
+  duration: number;
+}
+
+export interface MediaVolumeChangeEvent extends Event {
+  volume: number;
+  muted: boolean;
+}
+
+export interface MediaProgressEvent extends Event {
+  buffered: TimeRanges;
+  loaded: number;
+  total: number;
+}

package/src/types/formats.ts

@@ -0,0 +1,95 @@
+// Supported media formats and MIME types
+
+export const SUPPORTED_VIDEO_FORMATS = [
+  'mp4',
+  'webm',
+  'ogv',
+  'mov',
+  'avi',
+  'm4v',
+  'mkv',
+] as const;
+
+export const SUPPORTED_AUDIO_FORMATS = [
+  'mp3',
+  'aac',
+  'ogg',
+  'wav',
+  'flac',
+  'm4a',
+  'weba',
+] as const;
+
+export const VIDEO_MIME_TYPES = {
+  mp4: 'video/mp4',
+  webm: 'video/webm',
+  ogv: 'video/ogg',
+  mov: 'video/quicktime',
+  avi: 'video/x-msvideo',
+  m4v: 'video/x-m4v',
+  mkv: 'video/x-matroska',
+} as const;
+
+export const AUDIO_MIME_TYPES = {
+  mp3: 'audio/mpeg',
+  aac: 'audio/aac',
+  ogg: 'audio/ogg',
+  wav: 'audio/wav',
+  flac: 'audio/flac',
+  m4a: 'audio/mp4',
+  weba: 'audio/webm',
+} as const;
+
+export type VideoFormat = typeof SUPPORTED_VIDEO_FORMATS[number];
+export type AudioFormat = typeof SUPPORTED_AUDIO_FORMATS[number];
+export type MediaFormat = VideoFormat | AudioFormat;
+
+export type VideoMimeType = typeof VIDEO_MIME_TYPES[keyof typeof VIDEO_MIME_TYPES];
+export type AudioMimeType = typeof AUDIO_MIME_TYPES[keyof typeof AUDIO_MIME_TYPES];
+export type MediaMimeType = VideoMimeType | AudioMimeType;
+
+export interface MediaSource {
+  src: string;
+  type?: MediaMimeType;
+  media?: string; // Media query for responsive sources
+}
+
+export interface MediaCapabilities {
+  canPlayType: (type: string) => '' | 'maybe' | 'probably';
+  supportsFormat: (format: MediaFormat) => boolean;
+  supportsMimeType: (mimeType: MediaMimeType) => boolean;
+}
+
+/**
+ * Utility function to detect media type from file extension
+ */
+export function getMediaTypeFromUrl(url: string): 'video' | 'audio' | 'unknown' {
+  const extension = url.split('.').pop()?.toLowerCase();
+  
+  if (extension && SUPPORTED_VIDEO_FORMATS.includes(extension as VideoFormat)) {
+    return 'video';
+  }
+  
+  if (extension && SUPPORTED_AUDIO_FORMATS.includes(extension as AudioFormat)) {
+    return 'audio';
+  }
+  
+  return 'unknown';
+}
+
+/**
+ * Utility function to get MIME type from file extension
+ */
+export function getMimeTypeFromUrl(url: string): MediaMimeType | undefined {
+  const extension = url.split('.').pop()?.toLowerCase();
+  
+  if (extension && extension in VIDEO_MIME_TYPES) {
+    return VIDEO_MIME_TYPES[extension as keyof typeof VIDEO_MIME_TYPES];
+  }
+  
+  if (extension && extension in AUDIO_MIME_TYPES) {
+    return AUDIO_MIME_TYPES[extension as keyof typeof AUDIO_MIME_TYPES];
+  }
+  
+  return undefined;
+}

package/src/types/index.ts

@@ -0,0 +1,190 @@
+import type { ReactNode } from "react"
+
+// Re-export event types
+export type {
+	MediaErrorEvent,
+	MediaEventMap,
+	MediaEventType,
+	MediaProgressEvent,
+	MediaTimeUpdateEvent,
+	MediaVolumeChangeEvent
+} from "./events"
+// Re-export format types
+export {
+	AUDIO_MIME_TYPES,
+	getMediaTypeFromUrl,
+	getMimeTypeFromUrl,
+	SUPPORTED_AUDIO_FORMATS,
+	SUPPORTED_VIDEO_FORMATS,
+	VIDEO_MIME_TYPES
+} from "./formats"
+export type {
+	AudioFormat,
+	AudioMimeType,
+	MediaCapabilities,
+	MediaFormat,
+	MediaMimeType,
+	MediaSource,
+	VideoFormat,
+	VideoMimeType
+} from "./formats"
+
+// Re-export loading state types
+export type {
+	LoadingVariant,
+	LoadingContext,
+	LoadingSize,
+	LoadingStateProps,
+	CustomLoadingProps
+} from "../components/LoadingState"
+
+// Re-export AnimateLoadingWrapper for external use
+export { AnimateLoadingWrapper } from "../components/LoadingState"
+
+// Re-export video player types
+export type {
+	BufferedRange,
+	VideoState as EnhancedVideoState,
+	VideoControls
+} from "../hooks/useVideoPlayer"
+
+export interface MediaPlayerState {
+	isPlaying: boolean
+	currentTime: number
+	duration: number
+	volume: number
+	isMuted: boolean
+	isLoading: boolean
+	isFullscreen: boolean
+	error: string | null
+	buffered: TimeRanges | null
+	// New loading states
+	isSeeking?: boolean
+	isBuffering?: boolean
+	bufferedRanges?: BufferedRange[]
+}
+
+export interface MediaPlayerControls {
+	play: () => void
+	pause: () => void
+	toggle: () => void
+	seek: (time: number) => void
+	setVolume: (volume: number) => void
+	mute: () => void
+	unmute: () => void
+	toggleMute: () => void
+	enterFullscreen: () => void
+	exitFullscreen: () => void
+	toggleFullscreen: () => void
+}
+
+export interface MediaPlayerConfig {
+	autoPlay?: boolean
+	loop?: boolean
+	muted?: boolean
+	volume?: number
+	preload?: "none" | "metadata" | "auto"
+	crossOrigin?: "anonymous" | "use-credentials"
+	playbackRates?: number[]
+	keyboardControls?: boolean
+	showControls?: boolean
+	customControls?: boolean
+}
+
+export interface MediaPlayerProps extends MediaPlayerConfig {
+	src: string | string[]
+	poster?: string
+	className?: string
+	children?:
+		| ReactNode
+		| ((props: { state: MediaPlayerState; controls: MediaPlayerControls }) => ReactNode)
+	onPlay?: () => void
+	onPause?: () => void
+	onTimeUpdate?: (currentTime: number) => void
+	onDurationChange?: (duration: number) => void
+	onVolumeChange?: (volume: number) => void
+	onError?: (error: string) => void
+	onLoadStart?: () => void
+	onLoadedData?: () => void
+	onEnded?: () => void
+}
+
+export interface VideoPlayerProps extends MediaPlayerProps {
+	width?: number | string
+	height?: number | string
+	aspectRatio?: string
+}
+
+export interface AudioPlayerProps extends MediaPlayerProps {
+	// Audio-specific props can be added here
+}
+
+export interface SupportedFormats {
+	video: string[]
+	audio: string[]
+}
+
+export interface PlayButtonProps {
+	isPlaying: boolean
+	onToggle: () => void
+	disabled?: boolean
+	size?: "sm" | "md" | "lg" | "xl"
+	className?: string
+}
+
+export interface VolumeControlProps {
+	volume: number
+	isMuted: boolean
+	onVolumeChange: (volume: number) => void
+	onToggleMute: () => void
+	size?: "md" | "lg" | "xl"
+	className?: string
+}
+
+export interface SeekBarProps {
+	currentTime: number
+	duration: number
+	buffered?: TimeRanges | null
+	onSeek: (time: number) => void
+	size?: "md" | "lg" | "xl"
+	className?: string
+}
+
+export interface TimeDisplayProps {
+	currentTime: number
+	duration: number
+	showRemaining?: boolean
+	size?: "sm" | "md" | "lg" | "xl"
+	className?: string
+}
+
+export interface FullscreenButtonProps {
+	isFullscreen: boolean
+	onToggle: () => void
+	disabled?: boolean
+	size?: "md" | "lg" | "xl"
+	className?: string
+}
+
+// Subtitle track definition
+export interface SubtitleTrack {
+	id: string
+	label: string
+	language?: string
+	src?: string
+	kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata"
+	default?: boolean
+}
+
+// Custom loading component props
+export interface CustomLoadingComponentProps {
+	context: "initial" | "seeking" | "buffering"
+	message?: string
+	progress?: number
+}
+
+// Volume orientation type
+export type VolumeOrientation = "horizontal" | "vertical"
+
+// Import BufferedRange type for external use
+import type { BufferedRange } from "../hooks/useVideoPlayer"

package/src/types/videojs-plugins.d.ts

@@ -0,0 +1,14 @@
+declare module "@videojs/http-streaming" {
+  const httpStreaming: any
+  export default httpStreaming
+}
+
+declare module "videojs-contrib-quality-levels" {
+  const qualityLevels: any
+  export default qualityLevels
+}
+
+declare module "videojs-hls-quality-selector" {
+  const hlsQualitySelector: any
+  export default hlsQualitySelector
+}