{videos.map((video, index) => (
@@ -412,203 +1665,47 @@ function Playlist() {
}
```
----
-
-## ⌨️ Klavye Kısayolları
-
-Video player, kullanıcı deneyimini geliştirmek için kapsamlı klavye desteği sunar:
-
-| Tuş | Aksiyon |
-|-----|---------|
-| `Space` veya `K` | Oynat/Duraklat |
-| `←` (Sol Ok) | 5 saniye geri sar |
-| `→` (Sağ Ok) | 5 saniye ileri sar |
-| `J` | 10 saniye geri sar |
-| `L` | 10 saniye ileri sar |
-| `↑` (Yukarı Ok) | Ses seviyesini artır (%5) |
-| `↓` (Aşağı Ok) | Ses seviyesini azalt (%5) |
-| `M` | Sessiz/Sesli |
-| `F` | Tam ekran aç/kapat |
-| `P` | Picture-in-Picture |
-| `0` | Başa dön (%0) |
-| `1-9` | İlgili yüzdeye atla (%10-%90) |
-| `Home` | Başa dön |
-| `End` | Sona git |
-| `<` | Oynatma hızını azalt (0.25x) |
-| `>` | Oynatma hızını artır (0.25x) |
-
-**Not:** Klavye kısayolları sadece video player'a focus edildiğinde çalışır.
-
----
-
-## 📱 Touch Gesture'lar
-
-Mobil cihazlarda kullanıcı deneyimini geliştiren touch gesture'lar:
-
-### Temel Gesture'lar
-
-- **Tek Dokunuş**: Oynat/Duraklat
-- **Çift Dokunuş (Sol)**: 10 saniye geri sar
-- **Çift Dokunuş (Sağ)**: 10 saniye ileri sar
-
-### Swipe Gesture'ları
-
-- **Sağa Kaydır**: İleri sar (kaydırma mesafesine göre)
-- **Sola Kaydır**: Geri sar (kaydırma mesafesine göre)
-- **Yukarı Kaydır**: Ses seviyesini artır
-- **Aşağı Kaydır**: Ses seviyesini azalt
-
-### Pinch & Zoom
-
-- **Pinch**: Video zoom (bazı tarayıcılarda)
-
----
-
-## 🎨 Stil ve Özelleştirme
-
-### CSS Değişkenleri
-
-Video player, CSS değişkenleri kullanarak kolayca özelleştirilebilir. İşte tüm değişkenler:
-
-```css
-:root {
- /* Ana Renkler */
- --player-primary: #ef4444; /* Ana renk */
- --player-primary-hover: #dc2626; /* Hover rengi */
- --player-primary-active: #b91c1c; /* Active rengi */
- --player-primary-light: rgba(239, 68, 68, 0.2); /* Açık renk */
-
- /* Arkaplan Renkleri */
- --player-bg: #000000; /* Ana arkaplan */
- --player-bg-controls: rgba(0, 0, 0, 0.85); /* Kontrol paneli */
- --player-bg-overlay: rgba(0, 0, 0, 0.6); /* Overlay */
- --player-bg-menu: rgba(20, 20, 20, 0.95); /* Menu arkaplan */
-
- /* Yazı Renkleri */
- --player-text: #ffffff; /* Ana yazı */
- --player-text-secondary: #d1d5db; /* İkincil yazı */
- --player-text-muted: #9ca3af; /* Soluk yazı */
-
- /* Kenarlık & Ayırıcı */
- --player-border: #374151;
- --player-divider: rgba(255, 255, 255, 0.1);
-
- /* Progress & Buffered */
- --player-buffered: rgba(239, 68, 68, 0.3);
- --player-progress-bg: rgba(255, 255, 255, 0.3);
-
- /* Gölgeler */
- --player-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
- --player-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
- --player-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-
- /* Geçişler */
- --player-transition-fast: 150ms;
- --player-transition-normal: 250ms;
- --player-transition-slow: 400ms;
-
- /* Z-index */
- --player-z-video: 1;
- --player-z-subtitle: 10;
- --player-z-controls: 20;
- --player-z-menu: 30;
- --player-z-loading: 40;
-
- /* Boşluklar */
- --player-spacing-xs: 6px;
- --player-spacing-sm: 10px;
- --player-spacing-md: 14px;
- --player-spacing-lg: 20px;
- --player-spacing-xl: 28px;
-
- /* Border Radius */
- --player-radius-sm: 4px;
- --player-radius-md: 6px;
- --player-radius-lg: 8px;
- --player-radius-full: 9999px;
-
- /* İkon Boyutları */
- --player-icon-sm: 20px;
- --player-icon-md: 28px;
- --player-icon-lg: 36px;
- --player-icon-xl: 56px;
-}
-```
-
-### Tema Özelleştirme Örnekleri
-
-#### Koyu Mavi Tema
-
-```css
-:root {
- --player-primary: #3b82f6;
- --player-primary-hover: #2563eb;
- --player-primary-active: #1d4ed8;
- --player-bg: #0f172a;
-}
-```
+### CORS Hata Yönetimi
```tsx
-// veya JavaScript ile
-
-```
+import { VideoPlayer, isCORSError, getCORSErrorMessage } from '@alper/video-player'
+import { useState } from 'react'
-#### Yeşil Tema
+function VideoWithCORSHandling() {
+ const [error, setError] = useState
(null)
+ const videoUrl = 'https://example.com/video.mp4'
-```css
-:root {
- --player-primary: #10b981;
- --player-primary-hover: #059669;
- --player-primary-active: #047857;
-}
-```
+ const handleError = (err: Error) => {
+ if (isCORSError(err)) {
+ const message = getCORSErrorMessage(err, videoUrl)
+ setError(message)
+ console.error('CORS Hatası:', message)
+ } else {
+ setError(err.message)
+ }
+ }
-#### Mor Tema
+ return (
+
+
-```css
-:root {
- --player-primary: #8b5cf6;
- --player-primary-hover: #7c3aed;
- --player-primary-active: #6d28d9;
-}
-```
-
-### Özel CSS ile Özelleştirme
-
-Daha fazla kontrol için özel CSS yazabilirsiniz:
-
-```css
-/* Video player container boyutu */
-.video-player {
- max-width: 1200px;
- margin: 0 auto;
- border-radius: 12px;
- overflow: hidden;
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-}
-
-/* Kontrol paneli opacity */
-.video-controls {
- background: rgba(0, 0, 0, 0.95) !important;
-}
-
-/* Progress bar yüksekliği */
-.progress-bar {
- height: 6px !important;
-}
-
-/* Button boyutları */
-.control-button {
- width: 48px !important;
- height: 48px !important;
+ {error && (
+
+
Video Yükleme Hatası
+
{error}
+
Çözüm: Video sunucunuzda CORS headers ekleyin:
+
+ Access-Control-Allow-Origin: *{'\n'}
+ Access-Control-Allow-Methods: GET, HEAD{'\n'}
+ Access-Control-Allow-Headers: Range
+
+
+ )}
+
-
-
-
-
-
-
-
Oynatılıyor: {videoState.playing ? 'Evet' : 'Hayır'}
-
Süre: {videoState.duration}s
-
Mevcut: {videoState.currentTime}s
+
+
+ Buffer: {buffered.toFixed(0)}%
+
-
-
-```
-
-```css
-.mobile-container {
- width: 100%;
- padding: 0;
-}
-
-/* Mobil için özel ayarlar */
-@media (max-width: 768px) {
- .video-player {
- border-radius: 0;
- }
-
- .video-controls {
- padding: 8px !important;
- }
-}
-```
-
-### Aspect Ratio Koruması
-
-```tsx
-
-
-
-```
-
-### Grid Layout ile Çoklu Video
-
-```css
-.video-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 20px;
- padding: 20px;
-}
-```
-
-```tsx
-
-
-
-
-
-
-```
-
----
-
-## ⚠️ Dikkat Edilmesi Gerekenler
-
-### 1. CORS (Cross-Origin Resource Sharing)
-
-Video dosyaları farklı bir domain'de ise CORS header'ları gereklidir:
-
-```
-Access-Control-Allow-Origin: *
-Access-Control-Allow-Methods: GET, HEAD, OPTIONS
-Access-Control-Allow-Headers: Range
-```
-
-**Çözüm:**
-- Sunucunuzda CORS'u etkinleştirin
-- CDN kullanıyorsanız CORS ayarlarını yapın
-- Veya proxy sunucu kullanın
-
-### 2. Otomatik Oynatma Kısıtlamaları
-
-Modern tarayıcılar, kullanıcı etkileşimi olmadan otomatik oynatmayı engelleyebilir:
-
-```tsx
-// Otomatik oynatma için sessiz gereklidir
```
-### 3. iOS Safari Davranışları
-
-iOS Safari'de bazı özel durumlar vardır:
-
-- Fullscreen native player'ı açar
-- Volume kontrolü çalışmaz (sistem ses seviyesi kullanılır)
-- Otomatik oynatma kısıtlamaları daha katıdır
-
+**Dark Theme:**
```tsx
-import { features } from '@alper/video-player'
+
+```
-if (features.isIOSSafari()) {
- console.log('iOS Safari tespit edildi')
- // iOS spesifik ayarlamalar
+### CSS Override ile Özelleştirme
+
+```css
+/* Progress bar yüksekliğini artır */
+.video-player .progress-bar {
+ height: 8px !important;
}
-if (!features.hasVolumeControl()) {
- // Volume kontrolünü gizle
+/* Kontrol butonlarını büyüt */
+.video-player .control-button {
+ width: 48px !important;
+ height: 48px !important;
+}
+
+/* Loading spinner rengini değiştir */
+.video-player .loading-spinner {
+ border-color: #10b981 transparent transparent transparent !important;
+}
+
+/* Settings menü arka planı */
+.video-player .settings-menu {
+ background: rgba(30, 41, 59, 0.95) !important;
+ backdrop-filter: blur(10px) !important;
}
```
-### 4. Büyük Video Dosyaları
+### Responsive Design
-Büyük video dosyaları için HTTP Range Request desteği önemlidir:
+```css
+/* Mobil cihazlar için özelleştirme */
+@media (max-width: 768px) {
+ .video-player {
+ --player-spacing-md: 8px;
+ --player-radius: 8px;
+ }
-```
-Accept-Ranges: bytes
-Content-Range: bytes 0-1024/5242880
-```
+ .video-player .control-button {
+ width: 40px;
+ height: 40px;
+ }
-### 5. HLS.js Yükleme
+ .video-player .time-display {
+ font-size: 12px;
+ }
+}
-HLS.js optional dependency olarak eklenmiştir. NPM'den yüklenemezse CDN'den otomatik yüklenir.
+/* Tablet için */
+@media (min-width: 769px) and (max-width: 1024px) {
+ .video-player {
+ --player-spacing-md: 10px;
+ }
+}
-**Manuel kurulum:**
-```bash
-npm install hls.js
-```
-
-### 6. Performance İpuçları
-
-```tsx
-// ❌ Kötü: Her render'da yeni object
-
-
-// ✅ İyi: Dışarıda tanımla
-const theme = { primaryColor: '#ff0000' }
-
-
-// ✅ Daha iyi: useMemo kullan
-const theme = useMemo(() => ({
- primaryColor: '#ff0000'
-}), [])
-
-```
-
-### 7. Memory Leak Önleme
-
-Component unmount olduğunda player otomatik temizlenir. Manuel cleanup gerekmez.
-
-### 8. TypeScript Strict Mode
-
-TypeScript strict mode ile tam uyumludur:
-
-```typescript
-import type { VideoPlayerProps } from '@alper/video-player'
-
-const props: VideoPlayerProps = {
- src: 'video.mp4',
- // TypeScript tüm prop'ları kontrol eder
+/* Desktop için */
+@media (min-width: 1025px) {
+ .video-player {
+ --player-spacing-md: 12px;
+ }
}
```
---
-## 🧪 Test ve Hata Ayıklama
+## 🌍 Uluslararasılaştırma (i18n)
-### Hata Yakalama
+### Desteklenen Diller
+
+- **English (en)** - Varsayılan
+- **Turkish (tr)** - Türkçe
+
+### Otomatik Dil Tespiti
```tsx
-function SafePlayer() {
- const [error, setError] = useState(null)
+// Tarayıcı dilini otomatik tespit eder
+
+```
- if (error) {
- return (
-
-
Video yüklenemedi
-
{error.message}
-
-
- {loading && (
-
- Yükleniyor...
-
- )}
-
setLoading(false)}
- />
-