diff --git a/.gitignore b/.gitignore index a9a2eb1..7f6b0e1 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,8 @@ node_modules dist dist-ssr *.local +public +.npmrc # Editor directories and files .vscode/* @@ -21,6 +23,4 @@ dist-ssr *.ntvs* *.njsproj *.sln -*.sw? - -public/ \ No newline at end of file +*.sw? \ No newline at end of file diff --git a/.npmrc.example b/.npmrc.example new file mode 100644 index 0000000..1606ed3 --- /dev/null +++ b/.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. diff --git a/PUBLISHING.md b/PUBLISHING.md new file mode 100644 index 0000000..18272c9 --- /dev/null +++ b/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 ; +} +``` + +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. diff --git a/README-USAGE.md b/README-USAGE.md new file mode 100644 index 0000000..6236cce --- /dev/null +++ b/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 ( + + ); +} +``` + +### Özelliklerle Birlikte + +```tsx +import { VideoPlayer } from '@alper/video-player'; +import '@alper/video-player/styles.css'; + +function App() { + return ( + 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 ( + + ); +} +``` + +--- + +## 📺 HLS Streaming Desteği + +```tsx +import { VideoPlayer } from '@alper/video-player'; +import '@alper/video-player/styles.css'; + +function StreamingVideo() { + return ( + + ); +} +``` + +**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 ( + + ); +} +``` + +**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 ( +
+ {/* Oynat/Duraklat */} + + + {/* İleri/Geri */} + + + + {/* Ses Kontrolü */} + setVolume(parseFloat(e.target.value))} + /> + {Math.round(videoState.volume * 100)}% + + {/* Zaman Göstergesi */} +
+ {formatTime(videoState.currentTime)} / {formatTime(videoState.duration)} +
+ + {/* Oynatma Hızı */} + + + {/* Tam Ekran */} + +
+ ); +} + +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 ( + + + + + ); +} +``` + +--- + +## 🔌 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 ( +
+

Video Player

+ +
+ ); +} +``` + +--- + +## 📊 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 ( + 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 ( +
+ + +
+ {playlist.map((video, index) => ( + + ))} +
+
+ ); +} +``` + +### 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 ( + + ); +} +``` + +--- + +## 🐛 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. diff --git a/examples/App.tsx b/examples/App.tsx index b11efde..da8a9ac 100644 --- a/examples/App.tsx +++ b/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[] = [ diff --git a/package.json b/package.json index cce172e..2e3ae4a 100644 --- a/package.json +++ b/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/" + } }