lorapok-player

LORAPOK PLAYER (Core Library)

SUPERCOMPUTING MEDIA ENGINE

Lorapok Player is a high-performance React media engine engineered for ultra-low latency playback and biological aesthetics. It seamlessly handles MP4, HLS, and DASH streams with 4K/8K hardware acceleration.

🧬 FEATURES

• Adaptive Multi-Platform: Native support for HLS (.m3u8), DASH (.mpd), and standard Mp4.
• Organic UI Engine: Biological aesthetics with real-time reactive ambient lighting.
• Hardware Acceleration: GPU-optimized rasterization for buttery smooth 8K playback.
• Neural Probing: Accurate duration and metadata discovery using supercomputing pipelines.
• Theme Injection: Runtime theme switching with zero-latency visual transition.

📦 INSTALLATION

npm install lorapok-player

🚀 QUICK START

import { LorapokPlayer } from 'lorapok-player';
import 'lorapok-player/style.css';

const App = () => (
  <div className="player-wrapper">
    <LorapokPlayer 
      src="https://example.com/stream.m3u8" 
      autoPlay={false}
      className="lorapok-themed"
    />
  </div>
);

🧬 API REFERENCE

Props

Prop	Type	Default	Description
src	string	Required	Source URL (supports .mp4, .m3u8, .mpd).
autoPlay	boolean	false	Enable automatic playback.
loop	boolean	false	Restart media when finished.
muted	boolean	false	Start with volume at 0.
poster	string	undefined	Image displayed before video starts.
className	string	undefined	Custom CSS classes for the container.
initialPosition	number	0	Start playback from a specific timestamp (seconds).
showControls	boolean	true	Toggle the high-fidelity control deck.

Event Callbacks

Callback	Signature	Description
onPlay	() => void	Fired when playback starts.
onPause	() => void	Fired when playback is paused.
onEnded	() => void	Fired when the media reaches the end.
onTimeUpdate	(time: number) => void	Fired periodically during playback.
onError	(error: any) => void	Fired when a loading or playback error occurs.

🎮 PROGRAMMATIC CONTROL (Imperative API)

The LorapokPlayer component exposes a functional API via React refs. This allows you to control the player procedurally from your own components.

Usage Example

import { useRef } from 'react';
import { LorapokPlayer, LorapokPlayerRef } from 'lorapok-player';

const MyComponent = () => {
  const playerRef = useRef<LorapokPlayerRef>(null);

  const handleAction = () => {
    // Programmatically load a new video
    playerRef.current?.load('https://example.com/new-video.mp4');
    
    // Control playback
    playerRef.current?.play();
    
    // Seek to 30 seconds
    playerRef.current?.seek(30);
    
    // Switch themes on the fly
    playerRef.current?.setTheme('Cyber Bloom');
  };

  return <LorapokPlayer ref={playerRef} src="..." />;
};

Exposed Methods

Method	Signature	Description
load	(url: string) => void	Updates the source and prepares for playback.
play	() => void	Starts or resumes playback.
pause	() => void	Pauses playback.
toggle	() => void	Toggles play/pause state.
seek	(time: number) => void	Jumps to a specific timestamp (seconds).
setVolume	(v: number) => void	Sets volume level (0.0 to 1.0).
setMuted	(m: boolean) => void	Toggles or sets mute state.
setTheme	`(name: 'Midnight Core'	'Cyber Bloom'

🎨 STYLING & ADAPTIVE THEME

The player uses biological aesthetics with a reactive ambient lighting system. You can override global styles using the provided CSS variables:

:root {
  --lorapok-neon-cyan: #00F3FF;
  --lorapok-electric-purple: #BC13FE;
  --lorapok-midnight: #050510;
}

🛠 ADVANCED USAGE

HLS / DASH Support

The engine automatically detects and initializes hls.js or dash.js based on the file extension. No additional configuration is required.

Custom Keyboard Shortcuts

The library comes with a built-in interactive help system and standard shortcuts:

• SPACE : Play/Pause
• ← / → : Seek 5s
• F : Fullscreen
• M : Mute

🛠 TECH STACK

• React 18 (Functional Components & Hooks)
• HLS.js / Dash.js (Adaptive Streaming)
• Framer Motion (Organic Transitions)
• Vite (Next-gen Bundling)

📜 LICENSE

MIT © 2026 Lorapok Team. The core media engine and biological aesthetics are optimized for high-performance open computing.