Add npm registry configuration for Gitea

.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+public
+.npmrc
 
 # Editor directories and files
 .vscode/*
@@ -22,5 +24,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-public/

.npmrc.example

@@ -0,0 +1,27 @@
+# .npmrc Örnek Dosyası
+# Bu dosyayı diğer projelerinize kopyalayın ve .npmrc olarak kaydedin
+
+# @alper scope'u için Gitea registry'yi kullan
+@alper:registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+
+# Authentication token (environment variable kullanımı - ÖNERİLEN)
+//gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITEA_TOKEN}
+
+# Alternatif: Doğrudan token (GÜVENLİ DEĞİL - sadece local geliştirme için)
+# //gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=your-gitea-access-token-here
+
+# Environment variable nasıl ayarlanır:
+#
+# Linux/Mac:
+#   export GITEA_TOKEN=your-token-here
+#   # veya ~/.bashrc veya ~/.zshrc dosyasına ekleyin
+#
+# Windows (PowerShell):
+#   $env:GITEA_TOKEN="your-token-here"
+#   # veya sistem environment variables'a ekleyin
+#
+# .env dosyası (projede):
+#   GITEA_TOKEN=your-token-here
+
+# Not: Bu dosyayı .gitignore'a ekleyin!
+# Asla token'ınızı git'e commit etmeyin.

PUBLISHING.md

@@ -0,0 +1,397 @@
+# Gitea Self-Hosted npm Registry'ye Yayınlama Kılavuzu
+
+Bu kılavuz, `@alper/video-player` paketinin Gitea self-hosted npm registry'ye nasıl yayınlanacağını adım adım açıklar.
+
+---
+
+## 📋 Ön Gereksinimler
+
+- ✅ Çalışan bir Gitea sunucusu
+- ✅ Gitea hesabınıza erişim
+- ✅ Node.js ve pnpm/npm kurulu
+- ✅ Bu proje build edilmiş durumda
+
+---
+
+## 🔑 Adım 1: Gitea Access Token Oluşturma
+
+1. **Gitea web arayüzüne giriş yapın**
+   - Tarayıcınızda `https://gitea.yourdomain.com` adresine gidin
+   - Kullanıcı adı ve şifrenizle giriş yapın
+
+2. **Settings sayfasına gidin**
+   - Sağ üst köşedeki profil resmine tıklayın
+   - "Settings" seçeneğini seçin
+
+3. **Applications bölümüne gidin**
+   - Sol menüden "Applications" seçeneğini tıklayın
+
+4. **Yeni token oluşturun**
+   - "Generate New Token" butonuna tıklayın
+   - **Token Name:** `npm-publish-video-player` (veya istediğiniz bir isim)
+   - **Permissions (Yetkiler):**
+     - ✅ `write:package` - Paket yükleme yetkisi
+     - ✅ `read:package` - Paket okuma yetkisi (diğer projelerde kullanmak için)
+   - "Generate Token" butonuna tıklayın
+
+5. **Token'ı kopyalayın**
+   - ⚠️ **ÖNEMLİ:** Token sadece bir kez gösterilir!
+   - Token'ı güvenli bir yere kaydedin (örn: password manager)
+   - Örnek token: `1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t`
+
+---
+
+## 📝 Adım 2: package.json Dosyasını Düzenleme
+
+`package.json` dosyasını açın ve aşağıdaki bilgileri **kendi Gitea sunucunuza göre** düzenleyin:
+
+```json
+{
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.yourdomain.com/your-username/video-player.git"
+  },
+  "publishConfig": {
+    "registry": "https://gitea.yourdomain.com/api/packages/your-username/npm/"
+  }
+}
+```
+
+**Değiştirilmesi gerekenler:**
+- `gitea.yourdomain.com` → Gitea sunucunuzun domain'i
+- `your-username` → Gitea kullanıcı adınız
+
+**Örnek:**
+```json
+{
+  "repository": {
+    "type": "git",
+    "url": "https://git.example.com/alper/video-player.git"
+  },
+  "publishConfig": {
+    "registry": "https://git.example.com/api/packages/alper/npm/"
+  }
+}
+```
+
+---
+
+## 🔐 Adım 3: npm Login ile Kimlik Doğrulama
+
+Terminal'de aşağıdaki komutu çalıştırın:
+
+```bash
+npm config set @alper:registry https://gitea.yourdomain.com/api/packages/your-username/npm/
+
+npm login --scope=@alper --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+```
+
+**Değiştirin:**
+- `gitea.yourdomain.com` → Gitea domain'iniz
+- `your-username` → Gitea kullanıcı adınız
+
+**Giriş bilgileri istenecek:**
+
+```
+Username: your-gitea-username
+Password: 1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t  (Adım 1'de oluşturduğunuz token)
+Email: your-email@example.com
+```
+
+**Not:** Password kısmına Gitea şifrenizi değil, **token**'ı girin!
+
+Başarılı olursa şu mesajı görmelisiniz:
+```
+Logged in as your-username on https://gitea.yourdomain.com/api/packages/your-username/npm/.
+```
+
+---
+
+## 🏗️ Adım 4: Library Build
+
+Paketi yayınlamadan önce production build alın:
+
+```bash
+# TypeScript compile ve Vite build
+pnpm run build:lib
+```
+
+**Build başarılı olduysa:**
+- `dist/` klasöründe şu dosyalar oluşacak:
+  - ✅ `video-player.js` (ESM format)
+  - ✅ `video-player.umd.cjs` (UMD format)
+  - ✅ `index.d.ts` (TypeScript type definitions)
+  - ✅ `style.css` (CSS dosyası)
+
+**Kontrol edin:**
+```bash
+ls dist/
+# veya Windows'ta:
+dir dist\
+```
+
+---
+
+## 📤 Adım 5: npm Publish
+
+Artık paketi Gitea registry'ye yayınlayabilirsiniz:
+
+```bash
+npm publish
+```
+
+**Başarılı olursa şu çıktıyı görmelisiniz:**
+```
+npm notice
+npm notice package: @alper/video-player@0.1.0
+npm notice === Tarball Contents ===
+npm notice 1.2kB  package.json
+npm notice 8.5kB  dist/video-player.js
+npm notice 7.8kB  dist/video-player.umd.cjs
+npm notice 2.1kB  dist/index.d.ts
+npm notice 3.4kB  dist/style.css
+npm notice === Tarball Details ===
+npm notice name:          @alper/video-player
+npm notice version:       0.1.0
+npm notice package size:  23.0 kB
+npm notice unpacked size: 45.2 kB
+npm notice total files:   5
++ @alper/video-player@0.1.0
+```
+
+---
+
+## ✅ Adım 6: Yayını Doğrulama
+
+### Gitea Web Arayüzünde Kontrol
+
+1. Gitea'ya giriş yapın
+2. Üst menüden "Packages" seçeneğine tıklayın
+3. `@alper/video-player` paketini görmelisiniz
+4. Pakete tıklayarak detayları görüntüleyin
+
+### Komut Satırından Kontrol
+
+```bash
+npm view @alper/video-player --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+```
+
+---
+
+## 🔄 Adım 7: Güncelleme Yayınlama
+
+Paket üzerinde değişiklik yaptığınızda yeni versiyon yayınlamak için:
+
+### 1. Versiyonu Güncelle
+
+```bash
+# Patch version (0.1.0 → 0.1.1) - Bug fix
+npm version patch
+
+# Minor version (0.1.0 → 0.2.0) - Yeni özellik
+npm version minor
+
+# Major version (0.1.0 → 1.0.0) - Breaking change
+npm version major
+
+# Veya manuel olarak package.json'da version'ı değiştirin
+```
+
+### 2. Build Al
+
+```bash
+pnpm run build:lib
+```
+
+### 3. Yayınla
+
+```bash
+npm publish
+```
+
+### 4. Git'e Push Et (Opsiyonel)
+
+```bash
+git push && git push --tags
+```
+
+---
+
+## 🚀 Diğer Projelerde Kullanma
+
+### Adım 1: Diğer Projenizde .npmrc Oluşturun
+
+Projenizin root dizininde `.npmrc` dosyası oluşturun:
+
+```ini
+@alper:registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+//gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITEA_TOKEN}
+```
+
+### Adım 2: Environment Variable Ayarlayın
+
+```bash
+# Linux/Mac
+export GITEA_TOKEN=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t
+
+# Windows (PowerShell)
+$env:GITEA_TOKEN="1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t"
+
+# Veya .env dosyasına ekleyin:
+echo "GITEA_TOKEN=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t" >> .env
+```
+
+### Adım 3: Paketi Yükleyin
+
+```bash
+pnpm add @alper/video-player
+```
+
+### Adım 4: Kullanın
+
+```tsx
+import { VideoPlayer } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+function App() {
+  return <VideoPlayer src="/video.mp4" />;
+}
+```
+
+Detaylı kullanım örnekleri için [README-USAGE.md](./README-USAGE.md) dosyasına bakın.
+
+---
+
+## 🐛 Sorun Giderme
+
+### 1. "401 Unauthorized" Hatası
+
+**Sebep:** Token yanlış veya süresi dolmuş
+
+**Çözüm:**
+```bash
+# Tekrar login olun
+npm login --scope=@alper --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+```
+
+### 2. "403 Forbidden" Hatası
+
+**Sebep:** Token'da `write:package` yetkisi yok
+
+**Çözüm:**
+- Gitea'da yeni token oluşturun (Adım 1)
+- `write:package` yetkisini seçin
+- Yeni token ile login olun
+
+### 3. "Package already exists" Hatası
+
+**Sebep:** Aynı versiyonu tekrar yayınlamaya çalışıyorsunuz
+
+**Çözüm:**
+```bash
+# Versiyonu artırın
+npm version patch
+npm publish
+```
+
+### 4. "dist/ folder not found" Hatası
+
+**Sebep:** Build alınmamış
+
+**Çözüm:**
+```bash
+pnpm run build:lib
+npm publish
+```
+
+### 5. ".npmrc not working" Sorunu
+
+**Sebep:** Environment variable ayarlanmamış
+
+**Çözüm:**
+```bash
+# Token'ı kontrol edin
+echo $GITEA_TOKEN  # Linux/Mac
+echo $env:GITEA_TOKEN  # Windows PowerShell
+
+# Ayarlanmamışsa ayarlayın
+export GITEA_TOKEN=your-token  # Linux/Mac
+```
+
+### 6. "Cannot find module" Hatası (Diğer Projelerde)
+
+**Sebep:** .npmrc dosyası yok veya yanlış yapılandırılmış
+
+**Çözüm:**
+- `.npmrc` dosyasının proje root'unda olduğundan emin olun
+- Registry URL'inin doğru olduğunu kontrol edin
+- `pnpm install` veya `npm install` komutunu tekrar çalıştırın
+
+---
+
+## 📚 Faydalı Komutlar
+
+```bash
+# Hangi registry kullanılıyor?
+npm config get @alper:registry
+
+# Login durumunu kontrol et
+npm whoami --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+
+# Paket bilgilerini görüntüle
+npm view @alper/video-player
+
+# Yüklü versiyonu kontrol et (diğer projelerde)
+pnpm list @alper/video-player
+
+# Tüm npm ayarlarını temizle (sorun yaşıyorsanız)
+npm config delete @alper:registry
+
+# Package-lock veya pnpm-lock dosyasını temizle
+rm package-lock.json  # veya pnpm-lock.yaml
+pnpm install
+```
+
+---
+
+## 🔒 Güvenlik Notları
+
+1. **Token'ları asla git'e commit etmeyin**
+   - `.npmrc` dosyasını `.gitignore`'a ekleyin
+   - Token'ları environment variable olarak kullanın
+
+2. **Token yetkilerini minimumda tutun**
+   - Sadece gerekli yetkileri verin (`read:package`, `write:package`)
+
+3. **Token'ları düzenli olarak yenileyin**
+   - Eski token'ları silin
+   - Yeni token oluşturun ve güncelleyin
+
+4. **Production ortamda environment variables kullanın**
+   - `.env` dosyasını git'e eklemeyin
+   - CI/CD sistemlerinde secret manager kullanın
+
+---
+
+## ✅ Checklist
+
+Video Player Yayınlama:
+- [ ] Gitea access token oluşturdum
+- [ ] `package.json`'da `repository` ve `publishConfig` güncelledim
+- [ ] `npm login` ile kimlik doğrulaması yaptım
+- [ ] `pnpm run build:lib` ile build aldım
+- [ ] `npm publish` ile yayınladım
+- [ ] Gitea web arayüzünde paketi gördüm
+
+Diğer Projelerde Kullanma:
+- [ ] Projede `.npmrc` dosyası oluşturdum
+- [ ] `GITEA_TOKEN` environment variable'ını ayarladım
+- [ ] `pnpm add @alper/video-player` ile yükledim
+- [ ] CSS dosyasını import ettim
+- [ ] VideoPlayer component'ini kullandım
+
+---
+
+**Başarılar! 🎉**
+
+Artık video player kütüphanenizi tüm projelerinizde kullanabilirsiniz.

README-USAGE.md

@@ -0,0 +1,601 @@
+# @alper/video-player - Kullanım Kılavuzu
+
+Modern, özellik zengin React video player kütüphanesi. HLS streaming, altyazılar, klavye kısayolları, dokunmatik hareketler ve daha fazlasını destekler.
+
+## 📦 Kurulum
+
+### Gitea Self-Hosted Registry'den Yükleme
+
+1. **Projenizde `.npmrc` dosyası oluşturun:**
+
+```ini
+@alper:registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
+//gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITEA_TOKEN}
+```
+
+2. **Environment variable ayarlayın (önerilen):**
+
+```bash
+# Linux/Mac
+export GITEA_TOKEN=your-gitea-access-token
+
+# Windows (PowerShell)
+$env:GITEA_TOKEN="your-gitea-access-token"
+
+# veya .env dosyasına ekleyin
+GITEA_TOKEN=your-gitea-access-token
+```
+
+3. **Paketi yükleyin:**
+
+```bash
+pnpm add @alper/video-player
+# veya
+npm install @alper/video-player
+# veya
+yarn add @alper/video-player
+```
+
+---
+
+## 🚀 Temel Kullanım
+
+### Minimum Örnek
+
+```tsx
+import { VideoPlayer } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+function App() {
+  return (
+    <VideoPlayer
+      src="https://example.com/video.mp4"
+    />
+  );
+}
+```
+
+### Özelliklerle Birlikte
+
+```tsx
+import { VideoPlayer } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+function App() {
+  return (
+    <VideoPlayer
+      src="https://example.com/video.mp4"
+      poster="https://example.com/poster.jpg"
+      autoplay={false}
+      loop={false}
+      muted={false}
+      controls={true}
+      keyboardShortcuts={true}
+      pictureInPicture={true}
+      className="my-video-player"
+      onPlay={() => console.log('Video başladı!')}
+      onPause={() => console.log('Video durdu!')}
+      onTimeUpdate={(time) => console.log('Zaman:', time)}
+    />
+  );
+}
+```
+
+---
+
+## 🎨 Tema Özelleştirme
+
+```tsx
+import { VideoPlayer, PlayerTheme } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+const myTheme: PlayerTheme = {
+  primaryColor: '#3b82f6',    // Ana buton rengi
+  accentColor: '#2563eb',     // Hover rengi
+  backgroundColor: '#1f2937', // Arka plan
+  textColor: '#f9fafb',       // Metin rengi
+};
+
+function App() {
+  return (
+    <VideoPlayer
+      src="/video.mp4"
+      theme={myTheme}
+    />
+  );
+}
+```
+
+---
+
+## 📺 HLS Streaming Desteği
+
+```tsx
+import { VideoPlayer } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+function StreamingVideo() {
+  return (
+    <VideoPlayer
+      src="https://example.com/stream/master.m3u8"
+      poster="/poster.jpg"
+    />
+  );
+}
+```
+
+**Not:** HLS desteği için `hls.js` otomatik olarak yüklenir (optional dependency).
+
+---
+
+## 📝 Altyazı Desteği
+
+### VTT veya SRT Formatında
+
+```tsx
+import { VideoPlayer, SubtitleTrack } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+const subtitles: SubtitleTrack[] = [
+  {
+    label: 'Türkçe',
+    src: '/subtitles/turkish.vtt',
+    srcLang: 'tr',
+  },
+  {
+    label: 'English',
+    src: '/subtitles/english.vtt',
+    srcLang: 'en',
+  },
+  {
+    label: 'Español',
+    src: '/subtitles/spanish.srt',
+    srcLang: 'es',
+  },
+];
+
+function VideoWithSubtitles() {
+  return (
+    <VideoPlayer
+      src="/video.mp4"
+      subtitles={subtitles}
+    />
+  );
+}
+```
+
+**Desteklenen formatlar:** VTT, SRT
+
+---
+
+## ⌨️ Klavye Kısayolları
+
+Varsayılan olarak aktif. Devre dışı bırakmak için `keyboardShortcuts={false}` kullanın.
+
+| Tuş | Eylem |
+|-----|-------|
+| `Space` | Oynat/Duraklat |
+| `←` | 5 saniye geri |
+| `→` | 5 saniye ileri |
+| `↑` | Sesi artır (%5) |
+| `↓` | Sesi azalt (%5) |
+| `M` | Sesi kapat/aç |
+| `F` | Tam ekran |
+| `P` | Picture-in-Picture |
+| `0-9` | Videonun %0-%90'ına git |
+
+---
+
+## 👆 Dokunmatik Hareketler
+
+Mobil cihazlarda otomatik olarak aktiftir:
+
+- **Tek dokunma:** Kontrolleri göster/gizle
+- **Çift dokunma:** Oynat/Duraklat
+- **Sağa kaydır:** 10 saniye ileri
+- **Sola kaydır:** 10 saniye geri
+
+---
+
+## 🎛️ İleri Seviye: Context API Kullanımı
+
+Kendi özel kontrollerinizi oluşturabilirsiniz:
+
+```tsx
+import {
+  PlayerProvider,
+  usePlayerContext,
+  VideoPlayer
+} from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+function CustomControls() {
+  const {
+    videoState,
+    play,
+    pause,
+    seek,
+    setVolume,
+    toggleFullscreen,
+    setPlaybackRate
+  } = usePlayerContext();
+
+  return (
+    <div className="custom-controls">
+      {/* Oynat/Duraklat */}
+      <button onClick={() => videoState.playing ? pause() : play()}>
+        {videoState.playing ? '⏸ Duraklat' : '▶ Oynat'}
+      </button>
+
+      {/* İleri/Geri */}
+      <button onClick={() => seek(videoState.currentTime - 10)}>
+        ⏪ -10s
+      </button>
+      <button onClick={() => seek(videoState.currentTime + 10)}>
+        +10s ⏩
+      </button>
+
+      {/* Ses Kontrolü */}
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        value={videoState.volume}
+        onChange={(e) => setVolume(parseFloat(e.target.value))}
+      />
+      <span>{Math.round(videoState.volume * 100)}%</span>
+
+      {/* Zaman Göstergesi */}
+      <div>
+        {formatTime(videoState.currentTime)} / {formatTime(videoState.duration)}
+      </div>
+
+      {/* Oynatma Hızı */}
+      <select
+        value={videoState.playbackRate}
+        onChange={(e) => setPlaybackRate(parseFloat(e.target.value))}
+      >
+        <option value="0.5">0.5x</option>
+        <option value="1">Normal</option>
+        <option value="1.5">1.5x</option>
+        <option value="2">2x</option>
+      </select>
+
+      {/* Tam Ekran */}
+      <button onClick={toggleFullscreen}>
+        {videoState.fullscreen ? '🗗 Çıkış' : '🗖 Tam Ekran'}
+      </button>
+    </div>
+  );
+}
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+function App() {
+  return (
+    <PlayerProvider>
+      <VideoPlayer
+        src="/video.mp4"
+        controls={false} // Yerleşik kontrolleri gizle
+      />
+      <CustomControls />
+    </PlayerProvider>
+  );
+}
+```
+
+---
+
+## 🔌 Next.js Entegrasyonu
+
+Next.js'te SSR (Server-Side Rendering) sorunlarını önlemek için:
+
+```tsx
+'use client'; // App Router için
+
+import dynamic from 'next/dynamic';
+import '@alper/video-player/styles.css';
+
+// VideoPlayer'ı client-side only olarak yükle
+const VideoPlayer = dynamic(
+  () => import('@alper/video-player').then(mod => mod.VideoPlayer),
+  { ssr: false }
+);
+
+export default function VideoPage() {
+  return (
+    <div className="container">
+      <h1>Video Player</h1>
+      <VideoPlayer
+        src="/videos/demo.mp4"
+        poster="/images/poster.jpg"
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## 📊 Props API Referansı
+
+### VideoPlayerProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|-----------|----------|
+| `src` | `string` | **zorunlu** | Video URL'i (MP4, HLS, vb.) |
+| `poster` | `string` | - | Poster resim URL'i |
+| `autoplay` | `boolean` | `false` | Otomatik oynat |
+| `loop` | `boolean` | `false` | Döngü modu |
+| `muted` | `boolean` | `false` | Sessiz başlat |
+| `controls` | `boolean` | `true` | Kontrolleri göster |
+| `subtitles` | `SubtitleTrack[]` | - | Altyazı listesi |
+| `theme` | `PlayerTheme` | - | Renk teması |
+| `keyboardShortcuts` | `boolean` | `true` | Klavye desteği |
+| `pictureInPicture` | `boolean` | `true` | PiP desteği |
+| `className` | `string` | - | CSS sınıfı |
+| `style` | `CSSProperties` | - | Inline stil |
+
+### Event Callbacks
+
+| Callback | Parametre | Açıklama |
+|----------|-----------|----------|
+| `onPlay` | `() => void` | Video başladığında |
+| `onPause` | `() => void` | Video durduğunda |
+| `onEnded` | `() => void` | Video bittiğinde |
+| `onTimeUpdate` | `(time: number) => void` | Zaman güncellendiğinde |
+| `onVolumeChange` | `(volume: number) => void` | Ses değiştiğinde |
+| `onError` | `(error: Error) => void` | Hata oluştuğunda |
+| `onLoadedMetadata` | `() => void` | Metadata yüklendiğinde |
+| `onSeeking` | `() => void` | Arama başladığında |
+| `onSeeked` | `() => void` | Arama bittiğinde |
+
+### SubtitleTrack
+
+```typescript
+interface SubtitleTrack {
+  label: string;      // Görünen isim (ör: "Türkçe")
+  src: string;        // Altyazı dosya URL'i
+  srcLang: string;    // Dil kodu (ör: "tr", "en")
+}
+```
+
+### PlayerTheme
+
+```typescript
+interface PlayerTheme {
+  primaryColor?: string;      // Ana renk (varsayılan: #ef4444)
+  accentColor?: string;       // Vurgu rengi (varsayılan: #dc2626)
+  backgroundColor?: string;   // Arka plan rengi
+  textColor?: string;         // Metin rengi
+}
+```
+
+---
+
+## 🎯 usePlayerContext Hook API
+
+```typescript
+const {
+  // Video State
+  videoState: {
+    playing: boolean;
+    currentTime: number;
+    duration: number;
+    buffered: TimeRanges;
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    fullscreen: boolean;
+    pictureInPicture: boolean;
+    loading: boolean;
+    error: string | null;
+    seeking: boolean;
+  },
+
+  // UI State
+  uiState: {
+    controlsVisible: boolean;
+    settingsOpen: boolean;
+    volumeControlOpen: boolean;
+  },
+
+  // Settings
+  settings: {
+    quality: string | null;
+    subtitle: string | null;
+    playbackRate: number;
+  },
+
+  // Actions
+  play: () => void;
+  pause: () => void;
+  seek: (time: number) => void;
+  setVolume: (volume: number) => void;
+  toggleMute: () => void;
+  setPlaybackRate: (rate: number) => void;
+  toggleFullscreen: () => void;
+  togglePictureInPicture: () => void;
+
+} = usePlayerContext();
+```
+
+---
+
+## 💡 Kullanım Örnekleri
+
+### 1. Analytics Entegrasyonu
+
+```tsx
+import { VideoPlayer } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+function AnalyticsVideo() {
+  const trackEvent = (event: string, data?: any) => {
+    // Analytics servisinize gönderin
+    console.log('Analytics:', event, data);
+  };
+
+  return (
+    <VideoPlayer
+      src="/video.mp4"
+      onPlay={() => trackEvent('video_play')}
+      onPause={() => trackEvent('video_pause')}
+      onEnded={() => trackEvent('video_complete')}
+      onTimeUpdate={(time) => {
+        // Her %25'te bir event gönder
+        if (time % 25 === 0) {
+          trackEvent('video_progress', { percentage: time });
+        }
+      }}
+      onError={(error) => trackEvent('video_error', { message: error.message })}
+    />
+  );
+}
+```
+
+### 2. Playlist Sistemi
+
+```tsx
+import { useState } from 'react';
+import { VideoPlayer } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+const playlist = [
+  { id: 1, title: 'Video 1', src: '/videos/1.mp4' },
+  { id: 2, title: 'Video 2', src: '/videos/2.mp4' },
+  { id: 3, title: 'Video 3', src: '/videos/3.mp4' },
+];
+
+function PlaylistPlayer() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const currentVideo = playlist[currentIndex];
+
+  const handleEnded = () => {
+    // Sonraki videoya geç
+    if (currentIndex < playlist.length - 1) {
+      setCurrentIndex(currentIndex + 1);
+    }
+  };
+
+  return (
+    <div>
+      <VideoPlayer
+        key={currentVideo.id}
+        src={currentVideo.src}
+        onEnded={handleEnded}
+      />
+
+      <div className="playlist">
+        {playlist.map((video, index) => (
+          <button
+            key={video.id}
+            onClick={() => setCurrentIndex(index)}
+            className={index === currentIndex ? 'active' : ''}
+          >
+            {video.title}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+### 3. Çoklu Kalite Desteği
+
+```tsx
+import { VideoPlayer } from '@alper/video-player';
+import '@alper/video-player/styles.css';
+
+function QualityVideo() {
+  // HLS kullanıyorsanız otomatik kalite seçimi vardır
+  // Manuel kalite için farklı kaynak URL'leri kullanabilirsiniz
+
+  return (
+    <VideoPlayer
+      src="/videos/stream/master.m3u8" // HLS master playlist
+      // Otomatik olarak kaliteler algılanır ve ayarlarda gösterilir
+    />
+  );
+}
+```
+
+---
+
+## 🐛 Sorun Giderme
+
+### CSS Stilleri Yüklenmiyor
+
+Emin olun ki CSS dosyasını import ettiniz:
+
+```tsx
+import '@alper/video-player/styles.css';
+```
+
+### HLS Videoları Çalışmıyor
+
+1. `hls.js` yüklü mü kontrol edin:
+```bash
+pnpm add hls.js
+```
+
+2. Video URL'inin `.m3u8` uzantılı olduğundan emin olun
+
+### TypeScript Hataları
+
+`tsconfig.json`'da `skipLibCheck: true` ayarlayın veya paketi güncelleyin:
+
+```bash
+pnpm update @alper/video-player
+```
+
+### Next.js'te Hydration Hatası
+
+VideoPlayer'ı `dynamic` import ile yükleyin (`ssr: false`):
+
+```tsx
+const VideoPlayer = dynamic(
+  () => import('@alper/video-player').then(mod => mod.VideoPlayer),
+  { ssr: false }
+);
+```
+
+---
+
+## 📦 Bundle Boyutu
+
+- **Gzipped:** ~8KB (hls.js hariç)
+- **hls.js ile:** ~100KB (optional, sadece HLS kullanıyorsanız yüklenir)
+
+---
+
+## 🔄 Güncelleme
+
+```bash
+# En son versiyonu yükle
+pnpm update @alper/video-player
+
+# Belirli bir versiyonu yükle
+pnpm add @alper/video-player@0.2.0
+
+# Hangi versiyon yüklü?
+pnpm list @alper/video-player
+```
+
+---
+
+## 📄 Lisans
+
+MIT
+
+---
+
+## 💬 Destek
+
+Sorularınız için projeyi geliştiren kişiyle iletişime geçin.

examples/App.tsx

@@ -8,7 +8,7 @@ function App() {
   const [useDemo, setUseDemo] = useState(true)
 
   // Demo video URLs (you can replace with your own)
-  const demoVideoUrl = '/Stormy Weather_98515ce9/master.m3u8'
+  const demoVideoUrl = '/Stormy Weather_c7e908aa/master.m3u8'
   const demoPoster = undefined
 
   const demoSubtitles: SubtitleTrack[] = [

package.json

@@ -57,5 +57,12 @@
     "media"
   ],
   "author": "Alper",
-  "license": "MIT"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.hibna.com.tr/hibna/video-player.git"
+  },
+  "publishConfig": {
+    "registry": "https://gitea.hibna.com.tr/api/packages/hibna/npm/"
+  }
 }