hibna
147 lines
4.5 KiB
Markdown
147 lines
4.5 KiB
Markdown
# 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`
|
|
|