Delete PROJE_OZELLIK_ENVANTERI.md
This commit is contained in:
@@ -1,146 +0,0 @@
|
||||
# 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`
|
||||
|
||||
Reference in New Issue
Block a user