feat: apply phase1 DX cleanup for private registry

.npmrc.example

@@ -1,27 +1,27 @@
 # .npmrc Örnek Dosyası
 # Bu dosyayı diğer projelerinize kopyalayın ve .npmrc olarak kaydedin
 
-# @alper scope'u için Gitea registry'yi kullan
+# @source scope'u için private registry kullan
-@alper:registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+@source:registry=https://gits.yourdomain.com/api/packages/your-username/npm/
 
 # Authentication token (environment variable kullanımı - ÖNERİLEN)
-//gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITEA_TOKEN}
+//gits.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITS_NPM_TOKEN}
 
 # Alternatif: Doğrudan token (GÜVENLİ DEĞİL - sadece local geliştirme için)
-# //gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=your-gitea-access-token-here
+# //gits.yourdomain.com/api/packages/your-username/npm/:_authToken=your-registry-token-here
 
 # Environment variable nasıl ayarlanır:
 #
 # Linux/Mac:
-#   export GITEA_TOKEN=your-token-here
+#   export GITS_NPM_TOKEN=your-token-here
 #   # veya ~/.bashrc veya ~/.zshrc dosyasına ekleyin
 #
 # Windows (PowerShell):
-#   $env:GITEA_TOKEN="your-token-here"
+#   $env:GITS_NPM_TOKEN="your-token-here"
 #   # veya sistem environment variables'a ekleyin
 #
 # .env dosyası (projede):
-#   GITEA_TOKEN=your-token-here
+#   GITS_NPM_TOKEN=your-token-here
 
 # Not: Bu dosyayı .gitignore'a ekleyin!
 # Asla token'ınızı git'e commit etmeyin.

DOCUMENTATION.md

@@ -1,9 +1,9 @@
-# 🎬 @alper/video-player - Tam Dökümantasyon
+# 🎬 @source/player - Tam Dökümantasyon
 
 **Modern, zengin özellikli ve hafif React video oynatıcı kütüphanesi**
 
-[![npm version](https://img.shields.io/npm/v/@alper/video-player.svg?style=flat-square)](https://www.npmjs.com/package/@alper/video-player)
+[![npm version](https://img.shields.io/npm/v/@source/player.svg?style=flat-square)](https://www.npmjs.com/package/@source/player)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@alper/video-player?style=flat-square)](https://bundlephobia.com/package/@alper/video-player)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@source/player?style=flat-square)](https://bundlephobia.com/package/@source/player)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square)](https://www.typescriptlang.org/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 
@@ -47,15 +47,15 @@
 
 ## 🌟 Genel Bakış
 
-`@alper/video-player`, React uygulamaları için özel olarak tasarlanmış, modern bir video oynatıcı kütüphanesidir. HLS streaming, RTMP/FLV desteği, çoklu altyazı ve ses parçaları, kalite değiştirme ve daha fazlası gibi gelişmiş özellikleri içerir.
+`@source/player`, React uygulamaları için özel olarak tasarlanmış, modern bir video oynatıcı kütüphanesidir. HLS streaming, RTMP/FLV desteği, çoklu altyazı ve ses parçaları, kalite değiştirme ve daha fazlası gibi gelişmiş özellikleri içerir.
 
-### Neden @alper/video-player?
+### Neden @source/player?
 
-| Özellik | @alper/video-player | video.js | react-player | plyr |
+| Özellik | @source/player | video.js | react-player | plyr |
 |---------|---------------------|----------|--------------|------|
 | **Paket Boyutu (gzipped)** | **~15KB** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
 | **Runtime Bağımlılıkları** | **0** ✅ | Çok ❌ | Az ⚠️ | Az ⚠️ |
-| **React Native** | **Evet** ✅ | Wrapper ⚠️ | **Evet** ✅ | Wrapper ⚠️ |
+| **React (Web)** | **Evet** ✅ | Wrapper ⚠️ | **Evet** ✅ | Wrapper ⚠️ |
 | **TypeScript Native** | **Evet** ✅ | Types ⚠️ | Kısmi ⚠️ | Types ⚠️ |
 | **HLS Desteği** | **Evet** ✅ | Evet ✅ | Evet ✅ | Hayır ❌ |
 | **RTMP/FLV Desteği** | **Evet** ✅ | Hayır ❌ | Hayır ❌ | Hayır ❌ |
@@ -100,7 +100,7 @@ npm install -g pnpm
 
 ### 2. .npmrc Yapılandırması
 
-`@alper` scope'lu paketlerin Gitea registry'den çekilmesi için projenizin kök dizininde bir `.npmrc` dosyası oluşturmanız gerekir.
+`@source` scope'lu paketlerin Gitea registry'den çekilmesi için projenizin kök dizininde bir `.npmrc` dosyası oluşturmanız gerekir.
 
 #### Adım 2.1: .npmrc Dosyası Oluşturma
 
@@ -119,20 +119,20 @@ New-Item -Path .npmrc -ItemType File
 `.npmrc` dosyasını aşağıdaki içerikle doldurun:
 
 ```ini
-# @alper scope'u için Gitea registry'yi kullan
+# @source scope'u için private registry'yi kullan
-@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/
+@source:registry=https://gits.hibna.com.tr/api/packages/hibna/npm/
 
 # Authentication token
-# Token'ınızı almak için: https://gitea.hibna.com.tr/user/settings/applications
+# Token'ınızı almak için: https://gits.hibna.com.tr/user/settings/applications
 # "Generate New Token" butonuna tıklayın ve "read:package" yetkisini seçin
-//gitea.hibna.com.tr/api/packages/hibna/npm/:_authToken=YOUR_TOKEN_HERE
+//gits.hibna.com.tr/api/packages/hibna/npm/:_authToken=YOUR_TOKEN_HERE
 ```
 
 **ÖNEMLİ:** `YOUR_TOKEN_HERE` kısmını kendi Gitea access token'ınız ile değiştirin!
 
 #### Adım 2.3: Gitea Access Token Alma
 
-1. Gitea hesabınıza giriş yapın: https://gitea.hibna.com.tr
+1. Gitea hesabınıza giriş yapın: https://gits.hibna.com.tr
 2. Sağ üst köşeden profil ikonuna tıklayın → **Settings**
 3. Sol menüden **Applications** seçeneğine tıklayın
 4. **Manage Access Tokens** bölümünde **Generate New Token** butonuna tıklayın
@@ -168,28 +168,28 @@ Daha güvenli bir yöntem için token'ı environment variable olarak saklayabili
 
 **.npmrc dosyası:**
 ```ini
-@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/
+@source:registry=https://gits.hibna.com.tr/api/packages/hibna/npm/
-//gitea.hibna.com.tr/api/packages/hibna/npm/:_authToken=${GITEA_TOKEN}
+//gits.hibna.com.tr/api/packages/hibna/npm/:_authToken=${GITS_NPM_TOKEN}
 ```
 
 **Environment variable ayarlama:**
 
 ```bash
 # Linux/Mac (.bashrc veya .zshrc dosyasına ekleyin)
-export GITEA_TOKEN=your-actual-token-here
+export GITS_NPM_TOKEN=your-actual-token-here
 
 # Windows (PowerShell)
-$env:GITEA_TOKEN="your-actual-token-here"
+$env:GITS_NPM_TOKEN="your-actual-token-here"
 
 # Windows (Kalıcı - Sistem Environment Variables)
 # Sistem Özellikler → Gelişmiş → Ortam Değişkenleri → Yeni
-# Değişken adı: GITEA_TOKEN
+# Değişken adı: GITS_NPM_TOKEN
 # Değişken değeri: your-actual-token-here
 ```
 
 **CI/CD için (GitHub Actions, GitLab CI, vb.):**
 
-Repository settings → Secrets → `GITEA_TOKEN` adında bir secret oluşturun.
+Repository settings → Secrets → `GITS_NPM_TOKEN` adında bir secret oluşturun.
 
 ### 3. Kütüphaneyi Yükleme
 
@@ -197,13 +197,13 @@ Repository settings → Secrets → `GITEA_TOKEN` adında bir secret oluşturun.
 
 ```bash
 # npm ile
-npm install @alper/video-player
+npm install @source/player
 
 # veya pnpm ile (önerilen - daha hızlı)
-pnpm add @alper/video-player
+pnpm add @source/player
 
 # veya yarn ile
-yarn add @alper/video-player
+yarn add @source/player
 ```
 
 ### 4. Peer Dependencies
@@ -234,15 +234,15 @@ npm install --save-optional hls.js flv.js
 Kurulumun başarılı olduğunu doğrulamak için:
 
 ```bash
-npm list @alper/video-player
+npm list @source/player
 # veya
-pnpm list @alper/video-player
+pnpm list @source/player
 ```
 
 Çıktı şöyle olmalı:
 ```
 your-project@1.0.0
-└─┬ @alper/video-player@0.1.5
+└─┬ @source/player@0.1.5
 ```
 
 ### Sorun Giderme
@@ -254,11 +254,11 @@ your-project@1.0.0
 
 **Problem: "404 Not Found" hatası**
 - Registry URL'inin doğru olduğundan emin olun
-- `@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/`
+- `@source:registry=https://gits.hibna.com.tr/api/packages/hibna/npm/`
 - İnternet bağlantınızı kontrol edin
 - Gitea sunucusunun erişilebilir olduğundan emin olun
 
-**Problem: "Cannot find module '@alper/video-player'"**
+**Problem: "Cannot find module '@source/player'"**
 - `node_modules` klasörünü silin ve yeniden yükleyin:
   ```bash
   rm -rf node_modules package-lock.json
@@ -272,8 +272,8 @@ your-project@1.0.0
 ### Temel Kullanım
 
 ```tsx
-import { VideoPlayer } from '@alper/video-player'
+import { VideoPlayer } from '@source/player'
-import '@alper/video-player/styles.css'
+import '@source/player/styles.css'
 
 function App() {
   return (
@@ -630,7 +630,7 @@ function detectVideoProtocol(url: string): {
 
 **Kullanım:**
 ```typescript
-import { detectVideoProtocol } from '@alper/video-player'
+import { detectVideoProtocol } from '@source/player'
 
 const info = detectVideoProtocol('https://example.com/stream.m3u8')
 console.log(info.protocol)        // 'hls'
@@ -690,7 +690,7 @@ Merhaba dünya
 
 **Dönüşüm Fonksiyonu:**
 ```typescript
-import { parseSRT, createSubtitleBlobURL } from '@alper/video-player'
+import { parseSRT, createSubtitleBlobURL } from '@source/player'
 
 const srtContent = '...' // SRT içeriği
 const vttContent = parseSRT(srtContent)
@@ -737,7 +737,7 @@ const blobUrl = createSubtitleBlobURL(vttContent)
 
 **Programmatic Control:**
 ```tsx
-import { usePlayerContext } from '@alper/video-player'
+import { usePlayerContext } from '@source/player'
 
 function CustomSubtitleToggle() {
   const { settings, setSubtitle } = usePlayerContext()
@@ -789,7 +789,7 @@ function CustomSubtitleToggle() {
 
 **Programmatic Control:**
 ```tsx
-import { usePlayerContext } from '@alper/video-player'
+import { usePlayerContext } from '@source/player'
 
 function AudioTrackSelector() {
   const { settings, setAudioTrack } = usePlayerContext()
@@ -867,7 +867,7 @@ function AudioTrackSelector() {
 
 **Otomatik Kalite (Adaptive Bitrate):**
 ```typescript
-import { setHlsQualityLevel } from '@alper/video-player'
+import { setHlsQualityLevel } from '@source/player'
 
 setHlsQualityLevel(hlsInstance, null) // Auto
 ```
@@ -888,7 +888,7 @@ Kullanıcı Settings → Quality menüsünden kalite seçer.
 
 **Programmatic Control:**
 ```tsx
-import { usePlayerContext } from '@alper/video-player'
+import { usePlayerContext } from '@source/player'
 
 function QualitySelector() {
   const { settings, setQuality } = usePlayerContext()
@@ -974,7 +974,7 @@ function QualitySelector() {
 
 **Custom hook ile:**
 ```tsx
-import { useKeyboardShortcuts } from '@alper/video-player'
+import { useKeyboardShortcuts } from '@source/player'
 
 function MyComponent() {
   const { videoRef, containerRef } = usePlayerContext()
@@ -1039,7 +1039,7 @@ function MyComponent() {
 
 **Custom hook ile:**
 ```tsx
-import { useTouchGestures } from '@alper/video-player'
+import { useTouchGestures } from '@source/player'
 
 function MyComponent() {
   const { videoRef, containerRef } = usePlayerContext()
@@ -1411,20 +1411,20 @@ interface PlayerContextValue {
 
 ```typescript
 // Ana bileşen
-import { VideoPlayer } from '@alper/video-player'
+import { VideoPlayer } from '@source/player'
 ```
 
 ### Exported Hooks
 
 ```typescript
 // Player context hook
-import { usePlayerContext } from '@alper/video-player'
+import { usePlayerContext } from '@source/player'
 
 // Klavye kısayolları hook'u
-import { useKeyboardShortcuts } from '@alper/video-player'
+import { useKeyboardShortcuts } from '@source/player'
 
 // Dokunmatik jest hook'u
-import { useTouchGestures } from '@alper/video-player'
+import { useTouchGestures } from '@source/player'
 ```
 
 **usePlayerContext Kullanımı:**
@@ -1458,7 +1458,7 @@ function CustomControl() {
 
 ```typescript
 // Zaman formatlama
-import { formatTime, parseTime } from '@alper/video-player'
+import { formatTime, parseTime } from '@source/player'
 
 formatTime(125)          // "2:05"
 formatTime(3665)         // "1:01:05"
@@ -1470,7 +1470,7 @@ import {
   parseSRT,
   createSubtitleBlobURL,
   fetchSubtitle
-} from '@alper/video-player'
+} from '@source/player'
 
 const srtContent = "1\n00:00:01,000 --> 00:00:04,000\nMerhaba"
 const vttContent = parseSRT(srtContent)
@@ -1483,7 +1483,7 @@ import {
   getCORSErrorMessage,
   isCORSError,
   checkVideoCORS
-} from '@alper/video-player'
+} from '@source/player'
 
 const validation = validateVideoURL(url)
 if (!validation.valid) {
@@ -1505,7 +1505,7 @@ import {
   getTranslations,
   detectBrowserLanguage,
   translations
-} from '@alper/video-player'
+} from '@source/player'
 
 const lang = detectBrowserLanguage()    // "tr", "en", vb.
 const t = getTranslations('tr')
@@ -1520,8 +1520,8 @@ console.log(translations.tr.quality)    // "Kalite"
 ### Temel MP4 Oynatma
 
 ```tsx
-import { VideoPlayer } from '@alper/video-player'
+import { VideoPlayer } from '@source/player'
-import '@alper/video-player/styles.css'
+import '@source/player/styles.css'
 
 function App() {
   return (
@@ -1603,7 +1603,7 @@ function VideoWithAnalytics() {
 ### Custom Kontroller
 
 ```tsx
-import { VideoPlayer, usePlayerContext } from '@alper/video-player'
+import { VideoPlayer, usePlayerContext } from '@source/player'
 
 function CustomControls() {
   const {
@@ -1660,7 +1660,7 @@ function App() {
 
 ```tsx
 import { useState } from 'react'
-import { VideoPlayer } from '@alper/video-player'
+import { VideoPlayer } from '@source/player'
 
 const videos = [
   { id: 1, src: 'video1.mp4', title: 'Video 1' },
@@ -1706,7 +1706,7 @@ function Playlist() {
 ### CORS Hata Yönetimi
 
 ```tsx
-import { VideoPlayer, isCORSError, getCORSErrorMessage } from '@alper/video-player'
+import { VideoPlayer, isCORSError, getCORSErrorMessage } from '@source/player'
 import { useState } from 'react'
 
 function VideoWithCORSHandling() {
@@ -1762,7 +1762,7 @@ import {
   hasTouch,
   isIOSSafari,
   hasVolumeControl
-} from '@alper/video-player'
+} from '@source/player'
 
 // Safari'de native HLS var mı kontrol et
 if (hasNativeHLS()) {
@@ -1795,7 +1795,7 @@ if (hasVolumeControl()) {
 ### Manual HLS.js Setup
 
 ```typescript
-import { loadHls, setupHls } from '@alper/video-player'
+import { loadHls, setupHls } from '@source/player'
 
 async function customHlsSetup() {
   const videoElement = document.querySelector('video')
@@ -1829,7 +1829,7 @@ async function customHlsSetup() {
 ### Custom Subtitle Processing
 
 ```typescript
-import { parseSRT, createSubtitleBlobURL, fetchSubtitle } from '@alper/video-player'
+import { parseSRT, createSubtitleBlobURL, fetchSubtitle } from '@source/player'
 
 async function loadCustomSubtitle(url: string) {
   // SRT dosyasını fetch et
@@ -2077,7 +2077,7 @@ interface Translations {
 ### Programmatic Access
 
 ```typescript
-import { getTranslations, detectBrowserLanguage } from '@alper/video-player'
+import { getTranslations, detectBrowserLanguage } from '@source/player'
 
 // Tarayıcı dilini tespit et
 const browserLang = detectBrowserLanguage() // "tr", "en-US", vb.
@@ -2170,7 +2170,7 @@ export const translations: Record<string, Translations> = {
 
 ```tsx
 import { useEffect } from 'react'
-import { VideoPlayer } from '@alper/video-player'
+import { VideoPlayer } from '@source/player'
 
 function MonitoredVideo() {
   useEffect(() => {
@@ -2204,7 +2204,7 @@ function MonitoredVideo() {
 import { lazy, Suspense } from 'react'
 
 const VideoPlayer = lazy(() =>
-  import('@alper/video-player').then(module => ({
+  import('@source/player').then(module => ({
     default: module.VideoPlayer
   }))
 )
@@ -2300,7 +2300,7 @@ Kütüphane, eski tarayıcılar için otomatik polyfill içerir:
 
 **Tespit:**
 ```typescript
-import { isCORSError, getCORSErrorMessage } from '@alper/video-player'
+import { isCORSError, getCORSErrorMessage } from '@source/player'
 
 const handleError = (error: Error) => {
   if (isCORSError(error)) {
@@ -2437,7 +2437,7 @@ function RobustVideoPlayer() {
 
 ```bash
 # Repository'yi klonlayın
-git clone https://gitea.hibna.com.tr/hibna/video-player.git
+git clone https://gits.hibna.com.tr/hibna/video-player.git
 cd video-player
 
 # Bağımlılıkları yükleyin
@@ -2542,7 +2542,7 @@ Katkılarınızı bekliyoruz! Lütfen şu adımları takip edin:
 ```bash
 # Repository'yi fork edin (Gitea UI'dan)
 # Fork'unuzu klonlayın
-git clone https://gitea.hibna.com.tr/YOUR_USERNAME/video-player.git
+git clone https://gits.hibna.com.tr/YOUR_USERNAME/video-player.git
 cd video-player
 ```
 
@@ -2623,9 +2623,9 @@ SOFTWARE.
 
 ## 📞 İletişim
 
-- **Repository:** https://gitea.hibna.com.tr/hibna/video-player
+- **Repository:** https://gits.hibna.com.tr/hibna/video-player
-- **NPM Registry:** https://gitea.hibna.com.tr/api/packages/hibna/npm/
+- **NPM Registry:** https://gits.hibna.com.tr/api/packages/hibna/npm/
-- **Issues:** https://gitea.hibna.com.tr/hibna/video-player/issues
+- **Issues:** https://gits.hibna.com.tr/hibna/video-player/issues
 - **Author:** Alper
 
 ---
@@ -2645,3 +2645,6 @@ Bu proje, aşağıdaki açık kaynak kütüphanelerden ilham almıştır:
 **Built with ❤️ using React, TypeScript, and Vite**
 
 *Son güncelleme: 2024*
+
+
+

README.md

@@ -15,7 +15,7 @@ A feature-rich, modern video player library built with React, TypeScript, and Vi
 |---------|---------------------|----------|--------------|------|
 | **Bundle Size (gzipped)** | **~18KB JS + ~3.5KB CSS** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
 | **Runtime Dependencies** | **0** ✅ | Many ❌ | Few ⚠️ | Few ⚠️ |
-| **React Native** | **Yes** ✅ | Wrapper ⚠️ | **Yes** ✅ | Wrapper ⚠️ |
+| **React (Web)** | **Yes** ✅ | Wrapper ⚠️ | **Yes** ✅ | Wrapper ⚠️ |
 | **TypeScript Native** | **Yes** ✅ | Types ⚠️ | Partial ⚠️ | Types ⚠️ |
 | **HLS Support** | **Yes** ✅ | Yes ✅ | Yes ✅ | No ❌ |
 | **Quality Switching** | **Yes** ✅ | Yes ✅ | Limited ⚠️ | No ❌ |
@@ -84,27 +84,45 @@ A feature-rich, modern video player library built with React, TypeScript, and Vi
 
 ## 📦 Installation
 
-This is a local library project. To use it in your projects:
+This package is distributed through a private registry.
 
-### Option 1: Copy the library
+### 1. Configure `.npmrc`
-```bash
+
-# Copy the src folder to your project
+Create `.npmrc` in your app root:
-cp -r src/components your-project/src/
+
-cp -r src/contexts your-project/src/
+```ini
-cp -r src/hooks your-project/src/
+@source:registry=https://gits.hibna.com.tr/api/packages/hibna/npm/
-cp -r src/utils your-project/src/
+//gits.hibna.com.tr/api/packages/hibna/npm/:_authToken=${GITS_NPM_TOKEN}
-cp -r src/types your-project/src/
-cp -r src/icons your-project/src/
-cp -r src/styles your-project/src/
 ```
 
-### Option 2: Build as library and link
+### 2. Set token
+
+Set your token in environment variables (`GITS_NPM_TOKEN`) and do not commit `.npmrc` with a hardcoded token.
+
+### 3. Install package
+
 ```bash
-# In this project
+npm install @source/player
+# or
+pnpm add @source/player
+# or
+yarn add @source/player
+```
+
+### 4. Ensure peer dependencies
+
+```bash
+npm install react react-dom
+```
+
+### Local development (optional)
+
+```bash
+# In this repository
 npm run build:lib
 npm link
 
-# In your other project
+# In your consuming app
 npm link @source/player
 ```
 

src/components/ControlsLayer.tsx

@@ -31,7 +31,7 @@ export const ControlsLayer: React.FC<ControlsLayerProps> = ({
   audioTracks = [],
   qualities = [],
 }) => {
-  const { videoState, uiState, togglePlay, toggleFullscreen, showControls, hideControls } =
+  const { videoState, uiState, togglePlay, toggleFullscreen, showControls, hideControls, translations } =
     usePlayerContext()
   const [isPointerOver, setIsPointerOver] = useState(false)
   const [lastInteraction, setLastInteraction] = useState<number>(0)
@@ -228,7 +228,7 @@ export const ControlsLayer: React.FC<ControlsLayerProps> = ({
             {videoState.isLiveBroadcast && (
               <div className="live-indicator">
                 <span className="live-dot"></span>
-                <span className="live-text">LIVE</span>
+                <span className="live-text">{translations.live}</span>
               </div>
             )}
           </div>

src/components/VideoElement.tsx

@@ -8,6 +8,7 @@ import { setupRtmpInstance } from '../utils/rtmpSetup'
 import { setupMpegtsInstance } from '../utils/mpegtsSetup'
 import { detectVideoProtocol } from '../utils/videoProtocol'
 import { createSubtitleBlobURL } from '../utils/subtitles'
+import { logger } from '../utils/logger'
 import './VideoElement.css'
 
 interface VideoElementProps {
@@ -112,7 +113,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
 
     // Check if this is a live broadcast (duration is Infinity for live streams)
     const isLiveBroadcast = !isFinite(video.duration) || video.duration === 0
-    console.log('[VideoElement] Is live broadcast?', isLiveBroadcast, 'duration:', video.duration)
+    logger.log('[VideoElement] Is live broadcast?', isLiveBroadcast, 'duration:', video.duration)
 
     setVideoState((prev) => ({
       ...prev,
@@ -127,7 +128,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     if (tracks && processedSubtitles.length > 0) {
       const defaultSubtitle = processedSubtitles.find((sub) => sub.default)
       if (defaultSubtitle) {
-        console.log(`🎯 Found default subtitle in metadata: ${defaultSubtitle.label}`)
+        logger.log(`🎯 Found default subtitle in metadata: ${defaultSubtitle.label}`)
         // Set subtitle in context (this will trigger the useEffect that enables it)
         setSubtitle(defaultSubtitle)
       }
@@ -142,7 +143,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
 
     // Re-check if this is a live broadcast when duration changes
     const isLiveBroadcast = !isFinite(video.duration) || video.duration === 0
-    console.log('[VideoElement] Duration changed. Is live broadcast?', isLiveBroadcast, 'duration:', video.duration)
+    logger.log('[VideoElement] Duration changed. Is live broadcast?', isLiveBroadcast, 'duration:', video.duration)
 
     setVideoState((prev) => ({
       ...prev,
@@ -339,25 +340,16 @@ export const VideoElement: React.FC<VideoElementProps> = ({
                 throw new Error(`Failed to fetch subtitle: ${response.status} ${response.statusText}`)
               }
               const srtContent = await response.text()
-              console.log(`SRT content length: ${srtContent.length} chars`)
 
               const blobUrl = createSubtitleBlobURL(srtContent, 'srt')
               subtitleBlobUrlsRef.current.push(blobUrl)
 
-              // Debug: fetch the blob URL to verify VTT content
-              const vttResponse = await fetch(blobUrl)
-              const vttContent = await vttResponse.text()
-              console.log(`VTT content preview (first 500 chars):`, vttContent.substring(0, 500))
-              console.log(`Total VTT length: ${vttContent.length} chars`)
-
-              console.log(`Processed SRT subtitle "${subtitle.label}": ${subtitle.src} -> ${blobUrl}`)
               return { ...subtitle, src: blobUrl }
             }
             // VTT files can be used directly
-            console.log(`Using VTT subtitle "${subtitle.label}": ${subtitle.src}`)
             return subtitle
           } catch (error) {
-            console.error(`Failed to process subtitle ${subtitle.label}:`, error)
+            logger.error(`Failed to process subtitle ${subtitle.label}:`, error)
             return subtitle
           }
         })
@@ -459,10 +451,10 @@ export const VideoElement: React.FC<VideoElementProps> = ({
       }
     }
 
-    console.log('[VideoElement] Source:', src)
+    logger.log('[VideoElement] Source:', src)
-    console.log('[VideoElement] Detected protocol:', detection.protocol)
+    logger.log('[VideoElement] Detected protocol:', detection.protocol)
-    console.log('[VideoElement] Is live stream?', detection.isLive)
+    logger.log('[VideoElement] Is live stream?', detection.isLive)
-    console.log('[VideoElement] Needs special player?', detection.needsSpecialPlayer)
+    logger.log('[VideoElement] Needs special player?', detection.needsSpecialPlayer)
 
     const setupPlayer = async () => {
       try {
@@ -473,12 +465,12 @@ export const VideoElement: React.FC<VideoElementProps> = ({
             const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
             const shouldUseHlsJs = canPlayHLS === '' || !isSafari
 
-            console.log('[VideoElement] Native HLS support?', canPlayHLS)
+            logger.log('[VideoElement] Native HLS support?', canPlayHLS)
-            console.log('[VideoElement] Is Safari?', isSafari)
+            logger.log('[VideoElement] Is Safari?', isSafari)
-            console.log('[VideoElement] Will use HLS.js?', shouldUseHlsJs)
+            logger.log('[VideoElement] Will use HLS.js?', shouldUseHlsJs)
 
             if (shouldUseHlsJs) {
-              console.log('[VideoElement] Setting up HLS.js...')
+              logger.log('[VideoElement] Setting up HLS.js...')
               cleanupFn = await setupHlsInstance({
                 video,
                 src,
@@ -507,7 +499,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
               }
             } else {
               if (isCancelled) return
-              console.log('[VideoElement] Using native HLS playback')
+              logger.log('[VideoElement] Using native HLS playback')
               video.src = src
               if (autoplay) {
                 void video.play().catch(() => undefined)
@@ -518,7 +510,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
 
           case 'rtmp': {
             // RTMP/FLV streaming setup
-            console.log('[VideoElement] Setting up RTMP/FLV player...')
+            logger.log('[VideoElement] Setting up RTMP/FLV player...')
             cleanupFn = await setupRtmpInstance({
               video,
               src,
@@ -536,7 +528,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
 
           case 'mpegts': {
             // MPEG-TS/IPTV streaming setup
-            console.log('[VideoElement] Setting up MPEG-TS player...')
+            logger.log('[VideoElement] Setting up MPEG-TS player...')
             cleanupFn = await setupMpegtsInstance({
               video,
               src,
@@ -556,7 +548,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
             // DASH streaming - not yet implemented
             if (isCancelled) return
             const error = new Error('DASH streaming is not yet supported')
-            console.error('[VideoElement]', error.message)
+            logger.error('[VideoElement]', error.message)
             setVideoState((prev) => ({ ...prev, error, loading: false }))
             onError?.(error)
             break
@@ -566,7 +558,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
           default: {
             // Native HTML5 video (MP4, WebM, etc.)
             if (isCancelled) return
-            console.log('[VideoElement] Using native video.src')
+            logger.log('[VideoElement] Using native video.src')
             video.src = src
             if (autoplay) {
               void video.play().catch(() => undefined)
@@ -585,7 +577,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
 
         if (isCancelled) return
 
-        console.error('[VideoElement] Setup error:', error)
+        logger.error('[VideoElement] Setup error:', error)
         setVideoState((prev) => ({
           ...prev,
           error,
@@ -728,11 +720,11 @@ export const VideoElement: React.FC<VideoElementProps> = ({
             // Wait for track to have cues before showing
             if (track.cues && track.cues.length > 0) {
               track.mode = 'showing'
-              console.log(`🔊 Enabled subtitle track: ${track.label} (${track.language})`)
+              logger.log(`🔊 Enabled subtitle track: ${track.label} (${track.language})`)
-              console.log(`   - cues available: ${track.cues.length}`)
+              logger.log(`   - cues available: ${track.cues.length}`)
-              console.log(`   - track.mode: ${track.mode}`)
+              logger.log(`   - track.mode: ${track.mode}`)
             } else {
-              console.warn(`⚠️ Track ${track.label} has no cues yet, waiting...`)
+              logger.warn(`⚠️ Track ${track.label} has no cues yet, waiting...`)
               // Track not ready yet, will be handled by load event
               track.mode = 'showing'
             }
@@ -747,7 +739,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
 
     // Also listen for track load events to retry
     const handleTrackChange = () => {
-      console.log(`🔄 Track changed, re-enabling subtitle`)
+      logger.log(`🔄 Track changed, re-enabling subtitle`)
       enableSubtitle()
     }
 
@@ -762,80 +754,6 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     }
   }, [settings.subtitle, videoRef])
 
-  // Debug: Monitor text track loading
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
-
-    const handleTrackLoad = (e: Event) => {
-      const track = e.target as HTMLTrackElement
-      const textTrack = track.track
-      console.log(`✅ Track loaded: ${track.label} (${track.srclang})`)
-      console.log(`   - readyState: ${track.readyState}`)
-      console.log(`   - track.mode: ${textTrack.mode}`)
-      console.log(`   - track.cues: ${textTrack.cues?.length || 0}`)
-      console.log(`   - src: ${track.src}`)
-
-      // Log first few cues if available
-      if (textTrack.cues && textTrack.cues.length > 0) {
-        console.log(`   - First cue: ${(textTrack.cues[0] as VTTCue).startTime}s - ${(textTrack.cues[0] as VTTCue).endTime}s: "${(textTrack.cues[0] as VTTCue).text}"`)
-      } else {
-        console.warn(`   ⚠️ No cues found in track!`)
-      }
-    }
-
-    const handleTrackError = (e: Event) => {
-      const track = e.target as HTMLTrackElement
-      console.error(`❌ Track error: ${track.label} (${track.srclang})`)
-      console.error(`   - src: ${track.src}`)
-      console.error(`   - readyState: ${track.readyState}`)
-    }
-
-    const trackElements = video.querySelectorAll('track')
-    trackElements.forEach((track) => {
-      track.addEventListener('load', handleTrackLoad)
-      track.addEventListener('error', handleTrackError)
-    })
-
-    // Also monitor text tracks
-    const textTracks = video.textTracks
-    const handleCueChange = () => {
-      for (let i = 0; i < textTracks.length; i++) {
-        const track = textTracks[i]
-        if (track.mode === 'showing') {
-          console.log(`🎬 Cuechange: ${track.label}, cues: ${track.cues?.length || 0}, active cues: ${track.activeCues?.length || 0}`)
-          if (track.activeCues && track.activeCues.length > 0) {
-            const cue = track.activeCues[0] as VTTCue
-            console.log(`   - Active cue text: "${cue.text}"`)
-          }
-        }
-      }
-    }
-
-    for (let i = 0; i < textTracks.length; i++) {
-      textTracks[i].addEventListener('cuechange', handleCueChange)
-    }
-
-    // Log all text tracks after a delay to see their state
-    setTimeout(() => {
-      console.log(`📊 Text tracks summary (${textTracks.length} total):`)
-      for (let i = 0; i < textTracks.length; i++) {
-        const track = textTracks[i]
-        console.log(`   [${i}] ${track.label} (${track.language}): mode=${track.mode}, cues=${track.cues?.length || 0}`)
-      }
-    }, 1000)
-
-    return () => {
-      trackElements.forEach((track) => {
-        track.removeEventListener('load', handleTrackLoad)
-        track.removeEventListener('error', handleTrackError)
-      })
-      for (let i = 0; i < textTracks.length; i++) {
-        textTracks[i].removeEventListener('cuechange', handleCueChange)
-      }
-    }
-  }, [videoRef, processedSubtitles])
-
   return (
     <div className="video-container">
       <video
@@ -876,3 +794,4 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     </div>
   )
 }
+

src/components/controls/CenterPlayButton.tsx

@@ -4,7 +4,7 @@ import { PlayIcon } from '../../icons'
 import './CenterPlayButton.css'
 
 export const CenterPlayButton: React.FC = () => {
-  const { play } = usePlayerContext()
+  const { play, translations } = usePlayerContext()
 
   return (
     <div className="center-play-overlay">
@@ -12,8 +12,8 @@ export const CenterPlayButton: React.FC = () => {
         className="center-play-button"
         type="button"
         onClick={play}
-        aria-label="Play"
+        aria-label={translations.play}
-        title="Play"
+        title={translations.play}
       >
         <PlayIcon size={72} color="var(--player-text)" />
       </button>

src/components/controls/FullscreenButton.tsx

@@ -4,14 +4,17 @@ import { FullscreenIcon, FullscreenExitIcon } from '../../icons'
 import './ControlButton.css'
 
 export const FullscreenButton: React.FC = () => {
-  const { videoState, toggleFullscreen } = usePlayerContext()
+  const { videoState, toggleFullscreen, translations } = usePlayerContext()
+  const actionLabel = videoState.fullscreen
+    ? translations.exitFullscreen
+    : translations.enterFullscreen
 
   return (
     <button
       className="control-button fullscreen-button"
       onClick={toggleFullscreen}
-      aria-label={videoState.fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+      aria-label={actionLabel}
-      title={videoState.fullscreen ? 'Exit fullscreen (F)' : 'Enter fullscreen (F)'}
+      title={`${actionLabel} (F)`}
     >
       {videoState.fullscreen ? (
         <FullscreenExitIcon size={24} color="var(--player-text)" />

src/components/controls/PIPButton.tsx

@@ -4,7 +4,10 @@ import { PIPIcon } from '../../icons'
 import './ControlButton.css'
 
 export const PIPButton: React.FC = () => {
-  const { videoState, togglePictureInPicture } = usePlayerContext()
+  const { videoState, togglePictureInPicture, translations } = usePlayerContext()
+  const actionLabel = videoState.pictureInPicture
+    ? translations.exitPictureInPicture
+    : translations.enterPictureInPicture
 
   // Check if PIP is supported
   const isPIPSupported =
@@ -20,8 +23,8 @@ export const PIPButton: React.FC = () => {
     <button
       className="control-button pip-button"
       onClick={togglePictureInPicture}
-      aria-label={videoState.pictureInPicture ? 'Exit picture-in-picture' : 'Enter picture-in-picture'}
+      aria-label={actionLabel}
-      title="Picture-in-picture (P)"
+      title={`${actionLabel} (P)`}
     >
       <PIPIcon size={24} color="var(--player-text)" />
     </button>

src/components/controls/PlayPauseButton.tsx

@@ -4,14 +4,15 @@ import { PlayIcon, PauseIcon } from '../../icons'
 import './ControlButton.css'
 
 export const PlayPauseButton: React.FC = () => {
-  const { videoState, togglePlay } = usePlayerContext()
+  const { videoState, togglePlay, translations } = usePlayerContext()
+  const actionLabel = videoState.playing ? translations.pause : translations.play
 
   return (
     <button
       className="control-button play-pause-button"
       onClick={togglePlay}
-      aria-label={videoState.playing ? 'Pause' : 'Play'}
+      aria-label={actionLabel}
-      title={videoState.playing ? 'Pause (Space)' : 'Play (Space)'}
+      title={`${actionLabel} (Space)`}
     >
       {videoState.playing ? (
         <PauseIcon size={24} color="var(--player-text)" />

src/components/controls/ProgressBar.tsx

@@ -3,7 +3,7 @@ import { usePlayerContext } from '../../contexts/PlayerContext'
 import './ProgressBar.css'
 
 export const ProgressBar: React.FC = () => {
-  const { videoState, seek } = usePlayerContext()
+  const { videoState, seek, translations } = usePlayerContext()
   const progressRef = useRef<HTMLDivElement>(null)
   const [seeking, setSeeking] = useState(false)
   const [hoverTime, setHoverTime] = useState<number | null>(null)
@@ -83,7 +83,7 @@ export const ProgressBar: React.FC = () => {
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseLeave}
       role="slider"
-      aria-label="Video progress"
+      aria-label={translations.videoProgress}
       aria-valuemin={0}
       aria-valuemax={videoState.duration}
       aria-valuenow={videoState.currentTime}

src/components/controls/SettingsButton.tsx

@@ -4,15 +4,15 @@ import { SettingsIcon } from '../../icons'
 import './ControlButton.css'
 
 export const SettingsButton: React.FC = () => {
-  const { toggleSettings } = usePlayerContext()
+  const { toggleSettings, translations } = usePlayerContext()
 
   return (
     <button
       className="control-button settings-button"
       onMouseDown={(event) => event.stopPropagation()}
       onClick={toggleSettings}
-      aria-label="Settings"
+      aria-label={translations.settings}
-      title="Settings"
+      title={translations.settings}
     >
       <SettingsIcon size={24} color="var(--player-text)" />
     </button>

src/components/controls/VolumeControl.tsx

@@ -4,7 +4,7 @@ import { VolumeUpIcon, VolumeDownIcon, VolumeMuteIcon } from '../../icons'
 import './VolumeControl.css'
 
 export const VolumeControl: React.FC = () => {
-  const { videoState, setVolume, toggleMute } = usePlayerContext()
+  const { videoState, setVolume, toggleMute, translations } = usePlayerContext()
   const [showSlider, setShowSlider] = useState(false)
   const timeoutRef = useRef<number | undefined>(undefined)
 
@@ -30,6 +30,7 @@ export const VolumeControl: React.FC = () => {
   )
 
   const VolumeIcon = videoState.muted ? VolumeMuteIcon : videoState.volume > 0.5 ? VolumeUpIcon : VolumeDownIcon
+  const actionLabel = videoState.muted ? translations.unmute : translations.mute
 
   return (
     <div
@@ -40,8 +41,8 @@ export const VolumeControl: React.FC = () => {
       <button
         className="control-button volume-button"
         onClick={toggleMute}
-        aria-label={videoState.muted ? 'Unmute' : 'Mute'}
+        aria-label={actionLabel}
-        title={videoState.muted ? 'Unmute (M)' : 'Mute (M)'}
+        title={`${actionLabel} (M)`}
       >
         <VolumeIcon size={24} color="var(--player-text)" />
       </button>
@@ -55,7 +56,7 @@ export const VolumeControl: React.FC = () => {
           value={videoState.muted ? 0 : videoState.volume}
           onChange={handleSliderChange}
           className="volume-slider"
-          aria-label="Volume"
+          aria-label={translations.volume}
         />
         <div
           className="volume-slider-fill"

src/components/menus/SettingsMenu.tsx

@@ -92,7 +92,7 @@ export const SettingsMenu: React.FC<SettingsMenuProps> = ({
               <div className="settings-main-option-content">
                 <span className="settings-main-option-label">{translations.speed}</span>
                 <span className="settings-main-option-value">
-                  {videoState.playbackRate === 1 ? 'Normal' : `${videoState.playbackRate}x`}
+                  {videoState.playbackRate === 1 ? translations.normal : `${videoState.playbackRate}x`}
                 </span>
               </div>
               <div className="settings-main-option-arrow">›</div>
@@ -148,7 +148,7 @@ export const SettingsMenu: React.FC<SettingsMenuProps> = ({
                   setTimeout(() => goBack(), 150)
                 }}
               >
-                <span>{rate === 1 ? 'Normal' : `${rate}x`}</span>
+                <span>{rate === 1 ? translations.normal : `${rate}x`}</span>
                 {videoState.playbackRate === rate && <CheckIcon size={16} color="var(--player-primary)" />}
               </button>
             ))}

src/i18n/index.ts

@@ -14,6 +14,17 @@ export interface Translations {
   audioTrack: string;
   settings: string;
   level: string;
+  play: string;
+  pause: string;
+  mute: string;
+  unmute: string;
+  enterFullscreen: string;
+  exitFullscreen: string;
+  enterPictureInPicture: string;
+  exitPictureInPicture: string;
+  videoProgress: string;
+  volume: string;
+  live: string;
 }
 
 export const translations: Record<string, Translations> = {
@@ -29,6 +40,17 @@ export const translations: Record<string, Translations> = {
     audioTrack: 'Audio Track',
     settings: 'Settings',
     level: "Level",
+    play: 'Play',
+    pause: 'Pause',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    enterFullscreen: 'Enter fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+    enterPictureInPicture: 'Enter picture-in-picture',
+    exitPictureInPicture: 'Exit picture-in-picture',
+    videoProgress: 'Video progress',
+    volume: 'Volume',
+    live: 'LIVE',
   },
   tr: {
     noSubtitlesAvailable: 'Altyazı mevcut değil',
@@ -42,6 +64,17 @@ export const translations: Record<string, Translations> = {
     audioTrack: 'Ses',
     settings: 'Ayarlar',
     level: "Seviye",
+    play: 'Oynat',
+    pause: 'Duraklat',
+    mute: 'Sesi kapat',
+    unmute: 'Sesi aç',
+    enterFullscreen: 'Tam ekrana gir',
+    exitFullscreen: 'Tam ekrandan çık',
+    enterPictureInPicture: 'Resim içinde resme gir',
+    exitPictureInPicture: 'Resim içinde resimden çık',
+    videoProgress: 'Video ilerlemesi',
+    volume: 'Ses',
+    live: 'CANLI',
   },
 };
 

src/utils/hlsLoader.ts

@@ -5,6 +5,7 @@
 
 import type { AudioTrack, VideoQuality, SubtitleTrack } from '../types'
 import { getTranslations, detectBrowserLanguage } from '../i18n'
+import { logger } from './logger'
 
 // Re-export control functions for backward compatibility
 export { setHlsQualityLevel, setHlsAudioTrack } from './hlsControl'
@@ -47,20 +48,20 @@ const loadHlsFromCDN = (): Promise<any> => {
  */
 export const loadHls = async (): Promise<any> => {
   try {
-    console.log('[HLS Loader] Attempting to load from npm package...')
+    logger.log('[HLS Loader] Attempting to load from npm package...')
     // Try loading from npm package first
     const hlsModule = await import('hls.js')
-    console.log('[HLS Loader] Successfully loaded from npm package')
+    logger.log('[HLS Loader] Successfully loaded from npm package')
     return hlsModule.default
   } catch (npmError) {
-    console.warn('[HLS Loader] Failed to load from npm, trying CDN...', npmError)
+    logger.warn('[HLS Loader] Failed to load from npm, trying CDN...', npmError)
     try {
       // Fallback to CDN
       const Hls = await loadHlsFromCDN()
-      console.log('[HLS Loader] Successfully loaded from CDN')
+      logger.log('[HLS Loader] Successfully loaded from CDN')
       return Hls
     } catch (cdnError) {
-      console.error('[HLS Loader] Failed to load from CDN:', cdnError)
+      logger.error('[HLS Loader] Failed to load from CDN:', cdnError)
       throw new Error('Unable to load HLS.js library. HLS streaming is not available.')
     }
   }
@@ -87,17 +88,17 @@ export const hasNativeHlsSupport = (): boolean => {
 export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
   try {
     if (!hls) {
-      console.warn('[HLS Loader] getHlsAudioTracks: No HLS instance provided')
+      logger.warn('[HLS Loader] getHlsAudioTracks: No HLS instance provided')
       return []
     }
 
     // Check if audioTracks property exists
     if (!hls.audioTracks || !Array.isArray(hls.audioTracks)) {
-      console.warn('[HLS Loader] getHlsAudioTracks: No audioTracks array found on HLS instance')
+      logger.warn('[HLS Loader] getHlsAudioTracks: No audioTracks array found on HLS instance')
       return []
     }
 
-    console.log('[HLS Loader] getHlsAudioTracks: Raw audioTracks from HLS:', hls.audioTracks)
+    logger.log('[HLS Loader] getHlsAudioTracks: Raw audioTracks from HLS:', hls.audioTracks)
 
     const audioTracks: AudioTrack[] = hls.audioTracks.map((track: any, index: number) => {
       const audioTrack = {
@@ -111,10 +112,10 @@ export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
       return audioTrack
     })
 
-    console.log('[HLS Loader] getHlsAudioTracks: Processed tracks:', audioTracks)
+    logger.log('[HLS Loader] getHlsAudioTracks: Processed tracks:', audioTracks)
     return audioTracks
   } catch (error) {
-    console.error('[HLS Loader] getHlsAudioTracks: Error extracting audio tracks:', error)
+    logger.error('[HLS Loader] getHlsAudioTracks: Error extracting audio tracks:', error)
     return []
   }
 }
@@ -154,16 +155,16 @@ export const getHlsSubtitleTracks = (hls: any): SubtitleTrack[] => {
 export const getHlsQualities = (hls: any): VideoQuality[] => {
   try {
     if (!hls) {
-      console.warn('[HLS Loader] getHlsQualities: No HLS instance provided')
+      logger.warn('[HLS Loader] getHlsQualities: No HLS instance provided')
       return []
     }
 
     if (!Array.isArray(hls.levels)) {
-      console.warn('[HLS Loader] getHlsQualities: No levels array found on HLS instance')
+      logger.warn('[HLS Loader] getHlsQualities: No levels array found on HLS instance')
       return []
     }
 
-    console.log('[HLS Loader] getHlsQualities: Raw levels from HLS:', hls.levels)
+    logger.log('[HLS Loader] getHlsQualities: Raw levels from HLS:', hls.levels)
 
     const qualities: VideoQuality[] = hls.levels.map((level: any, index: number) => {
       const resolution = typeof level.attrs?.RESOLUTION === 'string' ? level.attrs.RESOLUTION : undefined
@@ -205,11 +206,12 @@ export const getHlsQualities = (hls: any): VideoQuality[] => {
       return (b.bitrate || 0) - (a.bitrate || 0)
     })
 
-    console.log('[HLS Loader] getHlsQualities: Processed qualities:', sortedQualities)
+    logger.log('[HLS Loader] getHlsQualities: Processed qualities:', sortedQualities)
     return sortedQualities
   } catch (error) {
-    console.error('[HLS Loader] getHlsQualities: Error extracting qualities:', error)
+    logger.error('[HLS Loader] getHlsQualities: Error extracting qualities:', error)
     return []
   }
 }
 
+

src/utils/hlsSetup.ts

@@ -3,6 +3,7 @@
  */
 
 import type { AudioTrack, VideoQuality, SubtitleTrack } from '../types'
+import { logger } from './logger'
 
 interface HlsSetupOptions {
   video: HTMLVideoElement
@@ -30,7 +31,7 @@ export const setupHlsInstance = async ({
     throw new Error('HLS.js is not supported in this browser')
   }
 
-  console.log('[HLS Setup] Creating HLS instance for:', src)
+  logger.log('[HLS Setup] Creating HLS instance for:', src)
 
   const hls = new Hls({
     enableWorker: true,
@@ -44,10 +45,10 @@ export const setupHlsInstance = async ({
   let manifestParsedHandled = false
 
   hls.on(Hls.Events.MANIFEST_PARSED, () => {
-    console.log('[HLS Setup] MANIFEST_PARSED event fired')
+    logger.log('[HLS Setup] MANIFEST_PARSED event fired')
 
     if (manifestParsedHandled) {
-      console.warn('[HLS Setup] MANIFEST_PARSED already handled, skipping')
+      logger.warn('[HLS Setup] MANIFEST_PARSED already handled, skipping')
       return
     }
     manifestParsedHandled = true
@@ -58,23 +59,23 @@ export const setupHlsInstance = async ({
       const qualities = getHlsQualities(hls)
       const subtitles = getHlsSubtitleTracks(hls)
 
-      console.log('[HLS Setup] Detected tracks:', {
+      logger.log('[HLS Setup] Detected tracks:', {
         audioTracks: tracks.length,
         qualities: qualities.length,
         subtitles: subtitles.length
       })
 
       if (tracks.length > 0) {
-        console.log('[HLS Setup] Loading audio tracks:', tracks)
+        logger.log('[HLS Setup] Loading audio tracks:', tracks)
         onAudioTracksLoaded?.(tracks)
       }
 
       if (subtitles.length > 0) {
-        console.log('[HLS Setup] Loading subtitle tracks:', subtitles)
+        logger.log('[HLS Setup] Loading subtitle tracks:', subtitles)
         onSubtitleTracksLoaded?.(subtitles)
       }
 
-      console.log('[HLS Setup] Loading quality levels:', qualities)
+      logger.log('[HLS Setup] Loading quality levels:', qualities)
       onQualityLevelsLoaded?.(qualities)
     }
 
@@ -93,14 +94,14 @@ export const setupHlsInstance = async ({
   hls.on(Hls.Events.LEVEL_LOADED, () => {
     const qualities = getHlsQualities(hls)
     if (qualities.length > 0) {
-      console.log('[HLS Setup] LEVEL_LOADED - Qualities available:', qualities.length)
+      logger.log('[HLS Setup] LEVEL_LOADED - Qualities available:', qualities.length)
       onQualityLevelsLoaded?.(qualities)
     }
   })
 
   hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, () => {
     const tracks = getHlsAudioTracks(hls)
-    console.log('[HLS Setup] AUDIO_TRACKS_UPDATED event:', tracks.length, 'tracks')
+    logger.log('[HLS Setup] AUDIO_TRACKS_UPDATED event:', tracks.length, 'tracks')
     if (tracks.length > 0) {
       onAudioTracksLoaded?.(tracks)
     }
@@ -108,7 +109,7 @@ export const setupHlsInstance = async ({
 
   hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => {
     const subtitles = getHlsSubtitleTracks(hls)
-    console.log('[HLS Setup] SUBTITLE_TRACKS_UPDATED event:', subtitles.length, 'tracks')
+    logger.log('[HLS Setup] SUBTITLE_TRACKS_UPDATED event:', subtitles.length, 'tracks')
     if (subtitles.length > 0) {
       onSubtitleTracksLoaded?.(subtitles)
     }
@@ -139,3 +140,4 @@ export const setupHlsInstance = async ({
     delete (video as any).__hlsInstance
   }
 }
+

src/utils/logger.ts

@@ -0,0 +1,9 @@
+type LoggerMethod = (..._args: unknown[]) => void
+
+const noop: LoggerMethod = () => undefined
+
+export const logger = {
+  log: noop,
+  warn: noop,
+  error: noop,
+}

src/utils/mpegtsLoader.ts

@@ -2,6 +2,7 @@
  * MPEG-TS loader utility
  * Dynamically loads mpegts.js library
  */
+import { logger } from './logger'
 
 export interface MpegtsConfig {
   enableWorker?: boolean
@@ -29,26 +30,26 @@ let loadingPromise: Promise<any> | null = null
 export const loadMpegts = async (): Promise<any> => {
   // Return cached instance if available
   if (mpegtsInstance) {
-    console.log('[MPEG-TS Loader] Using cached mpegts.js instance')
+    logger.log('[MPEG-TS Loader] Using cached mpegts.js instance')
     return mpegtsInstance
   }
 
   // Return existing loading promise if already loading
   if (loadingPromise) {
-    console.log('[MPEG-TS Loader] Already loading, waiting for existing promise...')
+    logger.log('[MPEG-TS Loader] Already loading, waiting for existing promise...')
     return loadingPromise
   }
 
   // Start loading
   loadingPromise = (async () => {
     try {
-      console.log('[MPEG-TS Loader] Attempting to load from npm package...')
+      logger.log('[MPEG-TS Loader] Attempting to load from npm package...')
       const module = await import('mpegts.js')
       mpegtsInstance = module.default || module
-      console.log('[MPEG-TS Loader] Successfully loaded from npm package')
+      logger.log('[MPEG-TS Loader] Successfully loaded from npm package')
       return mpegtsInstance
     } catch (error) {
-      console.error('[MPEG-TS Loader] Failed to load mpegts.js:', error)
+      logger.error('[MPEG-TS Loader] Failed to load mpegts.js:', error)
       throw new Error('Failed to load mpegts.js. Make sure it is installed: npm install mpegts.js')
     } finally {
       loadingPromise = null
@@ -103,5 +104,6 @@ export const getMpegtsInstance = (): any | null => {
 export const clearMpegtsCache = (): void => {
   mpegtsInstance = null
   loadingPromise = null
-  console.log('[MPEG-TS Loader] Cache cleared')
+  logger.log('[MPEG-TS Loader] Cache cleared')
 }
+

src/utils/mpegtsSetup.ts

@@ -5,6 +5,7 @@
 
 import { loadMpegts, isMpegtsSupported, createDefaultMpegtsConfig } from './mpegtsLoader'
 import { isLiveStream } from './videoProtocol'
+import { logger } from './logger'
 
 export interface MpegtsSetupOptions {
   video: HTMLVideoElement
@@ -41,7 +42,7 @@ export const setupMpegtsInstance = async ({
       throw error
     }
 
-    console.log('[MPEG-TS Setup] Creating player instance for:', src)
+    logger.log('[MPEG-TS Setup] Creating player instance for:', src)
 
     // Detect if stream is live
     const isLive = isLiveStream(src)
@@ -72,40 +73,40 @@ export const setupMpegtsInstance = async ({
 
     // Event handlers
     player.on(mpegts.Events.ERROR, (errorType: string, errorDetail: string, errorInfo: any) => {
-      console.error('mpegts.js error:', { errorType, errorDetail, errorInfo })
+      logger.error('mpegts.js error:', { errorType, errorDetail, errorInfo })
 
       const error = new Error(`MPEG-TS Player Error: ${errorType} - ${errorDetail}`)
 
       // Handle specific error types
       if (errorType === mpegts.ErrorTypes.NETWORK_ERROR) {
-        console.error('Network error occurred:', errorDetail)
+        logger.error('Network error occurred:', errorDetail)
 
         // Attempt recovery for recoverable network errors
         if (
           errorDetail === mpegts.ErrorDetails.NETWORK_EXCEPTION ||
           errorDetail === mpegts.ErrorDetails.NETWORK_STATUS_CODE_INVALID
         ) {
-          console.log('Attempting to recover from network error...')
+          logger.log('Attempting to recover from network error...')
           try {
             player.unload()
             player.load()
             return
           } catch (recoveryError) {
-            console.error('Failed to recover from network error:', recoveryError)
+            logger.error('Failed to recover from network error:', recoveryError)
           }
         }
       } else if (errorType === mpegts.ErrorTypes.MEDIA_ERROR) {
-        console.error('Media error occurred:', errorDetail)
+        logger.error('Media error occurred:', errorDetail)
 
         // Some media errors are recoverable
         if (errorDetail === mpegts.ErrorDetails.MEDIA_MSE_ERROR) {
-          console.log('Attempting to recover from media error...')
+          logger.log('Attempting to recover from media error...')
           try {
             player.unload()
             player.load()
             return
           } catch (recoveryError) {
-            console.error('Failed to recover from media error:', recoveryError)
+            logger.error('Failed to recover from media error:', recoveryError)
           }
         }
       }
@@ -117,15 +118,15 @@ export const setupMpegtsInstance = async ({
     })
 
     player.on(mpegts.Events.LOADING_COMPLETE, () => {
-      console.log('mpegts.js: Loading complete')
+      logger.log('mpegts.js: Loading complete')
     })
 
     player.on(mpegts.Events.RECOVERED_EARLY_EOF, () => {
-      console.log('mpegts.js: Recovered from early EOF')
+      logger.log('mpegts.js: Recovered from early EOF')
     })
 
     player.on(mpegts.Events.METADATA_ARRIVED, (metadata: any) => {
-      console.log('mpegts.js: Metadata arrived', metadata)
+      logger.log('mpegts.js: Metadata arrived', metadata)
 
       // Trigger onLoadedMetadata callback
       if (onLoadedMetadata) {
@@ -145,7 +146,7 @@ export const setupMpegtsInstance = async ({
       try {
         await video.play()
       } catch (playError) {
-        console.warn('Autoplay failed:', playError)
+        logger.warn('Autoplay failed:', playError)
         // Autoplay might be blocked by browser, ignore error
       }
     }
@@ -153,7 +154,7 @@ export const setupMpegtsInstance = async ({
     // Return cleanup function
     return () => {
       try {
-        console.log('Cleaning up mpegts.js player...')
+        logger.log('Cleaning up mpegts.js player...')
 
         // Remove event listeners
         player.off(mpegts.Events.ERROR)
@@ -176,11 +177,11 @@ export const setupMpegtsInstance = async ({
         delete (video as any).__mpegtsInstance
         delete (video as any).__mpegtsStats
       } catch (cleanupError) {
-        console.error('Error during mpegts.js cleanup:', cleanupError)
+        logger.error('Error during mpegts.js cleanup:', cleanupError)
       }
     }
   } catch (error) {
-    console.error('Failed to setup mpegts.js player:', error)
+    logger.error('Failed to setup mpegts.js player:', error)
 
     const setupError =
       error instanceof Error ? error : new Error('Failed to setup MPEG-TS player')
@@ -225,3 +226,4 @@ export const getMpegtsStats = (video: HTMLVideoElement | null): any | null => {
 export const hasMpegtsInstance = (video: HTMLVideoElement | null): boolean => {
   return getMpegtsInstance(video) !== null
 }
+

src/utils/rtmpLoader.ts

@@ -3,6 +3,7 @@
  * Loads flv.js library with NPM fallback to CDN strategy
  * Mirrors the HLS loader pattern for consistency
  */
+import { logger } from './logger'
 
 const FLVJS_CDN_URL = 'https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js'
 
@@ -48,14 +49,14 @@ export const loadFlvjs = async (): Promise<any> => {
     const flvModule = await import('flv.js')
     return flvModule.default || flvModule
   } catch (npmError) {
-    console.warn('flv.js NPM package not available, loading from CDN...', npmError)
+    logger.warn('flv.js NPM package not available, loading from CDN...', npmError)
 
     try {
       // Fallback to CDN
       const flvjs = await loadFlvjsFromCDN()
       return flvjs
     } catch (cdnError) {
-      console.error('Failed to load flv.js from both NPM and CDN', cdnError)
+      logger.error('Failed to load flv.js from both NPM and CDN', cdnError)
       throw new Error(
         'Failed to load flv.js library. Please ensure flv.js is available or check your network connection.'
       )
@@ -162,7 +163,8 @@ export const extractFlvQualityInfo = (player: any): {
       audioBitrate: stats.audioBitrate,
     }
   } catch (error) {
-    console.warn('Failed to extract flv.js quality info:', error)
+    logger.warn('Failed to extract flv.js quality info:', error)
     return null
   }
 }
+

src/utils/rtmpSetup.ts

@@ -6,6 +6,7 @@
 
 import { loadFlvjs, isFlvjsSupported, createDefaultFlvConfig } from './rtmpLoader'
 import { isLiveStream } from './videoProtocol'
+import { logger } from './logger'
 
 export interface RtmpSetupOptions {
   video: HTMLVideoElement
@@ -50,7 +51,7 @@ export const setupRtmpInstance = async ({
     if (src.startsWith('rtmp://') || src.startsWith('rtmps://')) {
       // For RTMP URLs, flv.js expects HTTP-FLV endpoint
       // This is a limitation - direct RTMP playback requires server-side conversion
-      console.warn(
+      logger.warn(
         'Direct RTMP playback requires an HTTP-FLV proxy. Please ensure your RTMP stream is available via HTTP-FLV.'
       )
       type = 'flv'
@@ -84,40 +85,40 @@ export const setupRtmpInstance = async ({
 
     // Event handlers
     player.on(flvjs.Events.ERROR, (errorType: string, errorDetail: string, errorInfo: any) => {
-      console.error('flv.js error:', { errorType, errorDetail, errorInfo })
+      logger.error('flv.js error:', { errorType, errorDetail, errorInfo })
 
       const error = new Error(`FLV Player Error: ${errorType} - ${errorDetail}`)
 
       // Handle specific error types
       if (errorType === flvjs.ErrorTypes.NETWORK_ERROR) {
-        console.error('Network error occurred:', errorDetail)
+        logger.error('Network error occurred:', errorDetail)
 
         // Attempt recovery for recoverable network errors
         if (
           errorDetail === flvjs.ErrorDetails.NETWORK_EXCEPTION ||
           errorDetail === flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID
         ) {
-          console.log('Attempting to recover from network error...')
+          logger.log('Attempting to recover from network error...')
           try {
             player.unload()
             player.load()
             return
           } catch (recoveryError) {
-            console.error('Failed to recover from network error:', recoveryError)
+            logger.error('Failed to recover from network error:', recoveryError)
           }
         }
       } else if (errorType === flvjs.ErrorTypes.MEDIA_ERROR) {
-        console.error('Media error occurred:', errorDetail)
+        logger.error('Media error occurred:', errorDetail)
 
         // Some media errors are recoverable
         if (errorDetail === flvjs.ErrorDetails.MEDIA_MSE_ERROR) {
-          console.log('Attempting to recover from media error...')
+          logger.log('Attempting to recover from media error...')
           try {
             player.unload()
             player.load()
             return
           } catch (recoveryError) {
-            console.error('Failed to recover from media error:', recoveryError)
+            logger.error('Failed to recover from media error:', recoveryError)
           }
         }
       }
@@ -129,15 +130,15 @@ export const setupRtmpInstance = async ({
     })
 
     player.on(flvjs.Events.LOADING_COMPLETE, () => {
-      console.log('flv.js: Loading complete')
+      logger.log('flv.js: Loading complete')
     })
 
     player.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
-      console.log('flv.js: Recovered from early EOF')
+      logger.log('flv.js: Recovered from early EOF')
     })
 
     player.on(flvjs.Events.METADATA_ARRIVED, (metadata: any) => {
-      console.log('flv.js: Metadata arrived', metadata)
+      logger.log('flv.js: Metadata arrived', metadata)
 
       // Trigger onLoadedMetadata callback
       if (onLoadedMetadata) {
@@ -158,7 +159,7 @@ export const setupRtmpInstance = async ({
       try {
         await video.play()
       } catch (playError) {
-        console.warn('Autoplay failed:', playError)
+        logger.warn('Autoplay failed:', playError)
         // Autoplay might be blocked by browser, ignore error
       }
     }
@@ -166,7 +167,7 @@ export const setupRtmpInstance = async ({
     // Return cleanup function
     return () => {
       try {
-        console.log('Cleaning up flv.js player...')
+        logger.log('Cleaning up flv.js player...')
 
         // Remove event listeners
         player.off(flvjs.Events.ERROR)
@@ -189,11 +190,11 @@ export const setupRtmpInstance = async ({
         delete (video as any).__rtmpInstance
         delete (video as any).__rtmpStats
       } catch (cleanupError) {
-        console.error('Error during flv.js cleanup:', cleanupError)
+        logger.error('Error during flv.js cleanup:', cleanupError)
       }
     }
   } catch (error) {
-    console.error('Failed to setup flv.js player:', error)
+    logger.error('Failed to setup flv.js player:', error)
 
     const setupError =
       error instanceof Error ? error : new Error('Failed to setup RTMP/FLV player')
@@ -238,3 +239,4 @@ export const getRtmpStats = (video: HTMLVideoElement | null): any | null => {
 export const hasRtmpInstance = (video: HTMLVideoElement | null): boolean => {
   return getRtmpInstance(video) !== null
 }
+