Some fixes

2026-02-12 17:54:16 +03:00
parent f57ee77c56
commit 8a32c5c1b3
18 changed files with 997 additions and 135 deletions
@@ -0,0 +1,146 @@
+# 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`
+