player/PROJE_OZELLIK_ENVANTERI.md

Video Player - Mevcut Ozellik Envanteri

Bu dosya, depoda yer alan kod, testler ve calistirilabilir komutlar incelenerek olusturuldu. Inceleme tarihi: 2026-02-12

1) Genel Mimari ve Paketleme

• React + TypeScript tabanli bir video oynatici kutuphanesi.
• Ana giris dosyasi: src/index.ts
• Ana bilesen: src/components/VideoPlayer.tsx
• Durum yonetimi: src/contexts/PlayerContext.tsx
• Vite ile hem demo app hem kutuphane derlemesi var:
  • Uygulama derlemesi: npm run build (vite.config.ts)
  • Kutuphane derlemesi: npm run build:lib (vite.config.lib.ts)
• Tip bildirimi uretiliyor (vite-plugin-dts).

2) Desteklenen Medya Turleri ve Protokoller

Kaynak: src/utils/videoProtocol.ts, src/components/VideoElement.tsx

• Native HTML5 video (mp4/webm vb.): dogrudan <video src=...>
• HLS (.m3u8)
  • Safari'de native oynatim denemesi
  • Diger tarayicilarda hls.js ile oynatim
  • hls.js npm import + CDN fallback yapisi (src/utils/hlsLoader.ts)
• FLV / RTMP akislari:
  • flv.js ile kurulum (src/utils/rtmpSetup.ts)
  • npm import + CDN fallback (src/utils/rtmpLoader.ts)
• MPEG-TS / IPTV (.ts) akislari:
  • mpegts.js ile kurulum (src/utils/mpegtsSetup.ts)
• DASH (.mpd) algilamasi var, fakat oynatim su an desteklenmiyor (hata donduruluyor).

3) Oynatici Kontrolleri ve UI Ozellikleri

Kaynak: src/components/ControlsLayer.tsx, src/components/controls/*

• Play/Pause butonu
• Ortada buyuk play overlay butonu (duraklatilmis durumda)
• Ilerleme cubugu:
  • Tiklayarak seek
  • Surukleyerek seek
  • Buffered gostergesi
  • Hover zamani tooltip'i
• Ses kontrolu:
  • Mute/unmute
  • Slider ile ses seviyesi
• Zaman gostergesi (current/duration)
• Fullscreen butonu
• Picture-in-Picture butonu (tarayici destegine bagli)
• Ayarlar menusu:
  • Hiz secimi (0.25x-2x)
  • Altyazi secimi
  • Ses izi secimi (HLS audio tracks varsa)
  • Kalite secimi (HLS levels varsa)
• Yuklenme sirasinda spinner
• Canli yayin algilanirsa:
  • Progress/time gizleniyor
  • "LIVE" rozeti gosteriliyor
• Kontroller fullscreen + playing durumunda otomatik gizlenebiliyor.

4) Giris Yontemleri (Keyboard ve Touch)

Klavye kisayollari (src/hooks/useKeyboardShortcuts.ts)

• Space / K: play-pause
• ArrowLeft / ArrowRight: -/+5s
• J / L: -/+10s
• ArrowUp / ArrowDown: ses artir/azalt
• M: mute
• F: fullscreen
• P: PIP
• 0 veya Home: basa sar
• End: sona git
• 1-9: yuzdeye git

Dokunmatik jestler (src/hooks/useTouchGestures.ts)

• Tek dokunus: play/pause
• Cift dokunus sol: -10s
• Cift dokunus sag: +10s
• Yatay kaydirma: seek
• Dikey kaydirma: ses seviyesi

5) Altyazi ve Icerik Isleme

Kaynak: src/utils/subtitles.ts, src/components/VideoElement.tsx

• WebVTT altyazi dosyalari direkt kullaniliyor.
• SRT dosyalari parse edilip VTT blob URL'e cevriliyor.
• Elle verilen altyazilar + HLS'den gelen altyazilar birlestiriliyor.
• Varsayilan (default) altyazi secimi destekleniyor.

6) I18n ve Tema

Kaynak: src/i18n/index.ts, src/styles/variables.css, src/components/VideoPlayer.tsx

• Yerlesik diller: Ingilizce (en) ve Turkce (tr)
• Tarayici dilini algilama destegi
• theme prop'u ile CSS variable override:
  • primaryColor
  • accentColor
  • backgroundColor
  • textColor

7) API ve Callback Yuzeyi

Kaynak: src/types/index.ts

• Temel props:
  • src, poster, autoplay, loop, muted, volume, playbackRate, currentTime
  • controls, subtitles, theme, language, keyboardShortcuts, pictureInPicture
  • className, style
• Olay callbackleri:
  • onPlay, onPause, onEnded
  • onTimeUpdate, onVolumeChange, onProgress
  • onLoadedMetadata, onDurationChange, onRateChange
  • onSeeking, onSeeked
  • onFullscreenChange, onPictureInPictureChange
  • onWaiting, onCanPlay, onError

8) Hata Yonetimi ve Dayaniklilik

Kaynak: src/utils/corsHelper.ts, src/utils/hlsSetup.ts, src/utils/rtmpSetup.ts, src/utils/mpegtsSetup.ts

• URL dogrulama ve CORS kaynakli hata mesajlari
• HLS/FLV/MPEG-TS icin hata callbackleri
• HLS'de fatal hata toparlama denemeleri (startLoad, recoverMediaError)
• FLV/MPEG-TS tarafinda network/media hata recovery denemeleri
• Player instance temizligi icin cleanup akisi

9) Test, Lint ve Derleme Durumu

Bu inceleme sirasinda calistirilan komutlar:

• npm run lint -> basarili
• npm run test -> basarili
  • 3 test dosyasi, toplam 64 test geciyor
• npm run build -> basarili
• npm run build:lib -> basarili

Test dosyalari:

• src/components/VideoPlayer.test.tsx
• src/utils/corsHelper.test.ts
• src/utils/videoProtocol.test.ts